无法在滚动条上使用鼠标滚轮 div

Question

我有两个 div，一个 child 另一个。 child div 是可滚动的，位于 parent div（这是一张地图）上。但是我不能使用我的鼠标滚轮滚动 div，使用鼠标滚轮会使地图缩小 in/out。我以类似的方式单击时，单击下面的地图（child 上的复选框除外）。

PARENT

<div id="map" class="map" style="position: relative;">

CHILD

<div id="legend" class="legend" style="position: absolute; top: 0px; right: 0px; width:300px; z-index: 100;>
  <div>...</div>
  <div>...</div>
</div>

关于如何仅在 child div 上使用鼠标滚轮而不影响 parent div 的任何想法？

我认为它可能与z-index有关，因为即使我将地图的z-index设置为1000，它仍然低于图例。

注意：该地图是 Leaflet 地图，以这种方式创建：

var map = L.map('map', {
  center: [45.81, 9.1],
  zoom: 15
});

谢谢！

Answer 1

您可以使用 L.DomEvent 的 disableClickPropagation 和 disableScrollPropagation 方法在 div 元素上禁用 click/scroll 传播。他们将取消事件，因此它不会通过 DOM:

L.DomEvent.disableClickPropagation(L.DomUtil.get('legend'));
L.DomEvent.disableScrollPropagation(L.DomUtil.get('legend'));

Cannot use mouse wheel on a scrollable div