时间戳

首页 > 解决方案 > Leaflet 防止窗口滚动

javascript - Leaflet 防止窗口滚动

问题描述

我正在以某种视差设计创建一个网站，对于某些部分，我需要地图作为背景。我希望地图对鼠标滚轮滚动不敏感，但我想保留 +- 按钮缩放控制。但是我的解决方案仍然不起作用 - 一旦我滚动到地图并单击它，我就无法再滚动离开它了。这是我当前设置的小提琴：

https://jsfiddle.net/Drozi/x7jg4we6/47/

If you try to scroll down to the map, click on the map, you cant scroll back after that.

我试图从头开始构建一个小提琴，然后它就起作用了。不幸的是，相同的设置（我肯定在这里遗漏了一些东西）在整个网页（以及共享小提琴）中都不起作用。

我使用 Bootstrap4。

标签： javascriptcsstwitter-bootstrapleafletparallax

解决方案

我可以在 jsfiddle 中看到您的问题。添加pointer-events: none到传单地图容器似乎为我解决了这个问题。即使点击地图后，页面仍然会随着您的视差效果滚动，并且缩放控件仍然有效：

#leafletmap-places {
    height: 100%;
    width: 100%;
    opacity: 0.4;
    z-index: 0;
    pointer-events: none; // <--- works for me
}

这是你的小提琴，如果这对你有用，请告诉我。

（我不确定这是否是您的意图，但您的地图没有响应拖动事件 - 我的更改仍然如此。但是我的更改也禁用了双击事件。如果您的地图需要更多交互性，有可能需要做更多的调整。）

推荐阅读