微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

传单防止窗口滚动

如何解决传单防止窗口滚动

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

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

.message

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

我使用 Bootstrap4。

解决方法

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

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

Here's your fiddle forked with the change,让我知道这是否适合您。

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。