如何避免绝对定位的controlgroup吞掉地图点击事件且不禁用滚动条

Great question—this is a common gotcha with pointer-events and scroll containers. Let's break down why your Version 2 fix broke scrolling, then land on a solution that works for your dynamic content constraints.

The Root Problem #

When you set pointer-events: none on .controlgroup, you disabled all mouse interactions for the entire element—including its scrollbar. That's why scrolling stopped working. We need to separate two behaviors:

• Let clicks pass through empty spaces in the control area to the map
• Keep scroll functionality and control click interactions intact

Preferred CSS Solution (No Dynamic Height Calculations) #

This approach uses a two-container structure to split the "space reservation" from the "interactive scrolling area":

Updated Code #

<div class="map" id="map"> MAP </div>
<!-- Add a wrapper to handle space reservation and click passthrough -->
<div class="control-group-wrapper">
  <div class="controlgroup">
    <div class="control" id="control1"> This is control 1<br /> This is control 1<br /> This is control 1<br /> This is control 1<br /> This is control 1<br /> This is control 1<br /> This is control 1<br /> </div>
    <div class="control" id="control2"> This is control 2<br /> This is control 2<br /> This is control 2<br /> This is control 2<br /> This is control 2<br /> This is control 2<br /> This is control 2<br /> </div>
  </div>
</div>

<script>
document.getElementById("map").addEventListener("click", function(e) { alert("Map clicked!"); });
document.getElementById("control1").addEventListener("click", function(e) { alert("Control 1 clicked!"); });
document.getElementById("control2").addEventListener("click", function(e) { alert("Control 2 clicked!"); });
</script>

<style>
body, html { position: relative; width: 100%; height: 100%; margin: 0; }
.map { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #0c0; padding: 10px; }

/* Wrapper: reserves space, allows clicks to pass through to map */
.control-group-wrapper {
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: 10px;
  width: 200px;
  pointer-events: none; /* Critical: lets clicks pass through empty areas */
}

/* Inner control group: handles scrolling and interactions */
.controlgroup {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  pointer-events: auto; /* Restores interactions for scrollbar and controls */
}

.control { padding: 10px; }
#control1 { background: #c00; }
.control { background: #00c; }
</style>

Why This Works #

• The outer .control-group-wrapper holds the right-side space but doesn't block clicks (thanks to pointer-events: none). Any click on empty areas here falls through to the map.
• The inner .controlgroup handles scrolling and restores mouse interactions with pointer-events: auto, so its scrollbar works and controls respond to clicks.
• Dynamic content (generated via JS, shown/hidden) works seamlessly—no need to calculate total control height, since the inner container scrolls automatically.

Alternative JS Solution (If HTML Structure Can't Change) #

If you can't modify the HTML structure, use event delegation to "forward" clicks on empty parts of the control group to the map:

document.querySelector('.controlgroup').addEventListener('click', function(e) {
  // Check if the click target (or its parent) is NOT a .control element
  if (!e.target.closest('.control')) {
    // Trigger a click event on the map
    document.getElementById('map').dispatchEvent(new Event('click'));
  }
});

Keep your Version 2 CSS but remove pointer-events: none from .controlgroup and pointer-events: auto from .control—this way scrolling works, and we manually pass through non-control clicks to the map.

内容的提问来源于stack exchange，提问作者John Slegers