防止 div 在 Chrome 中滚动

Question

我有一个 div 块，当整个页面滚动时，它不应该从页面滚动，所以我使用了 css 属性

pointer-events: none

我使用了视差，所以 "first" 部分中图像和标题的顶部位置由它设置，但是当鼠标在此块上滚动时它会影响顶部位置

<section id="first" data-type="background" data-speed="10"  style="pointer-events: none!important">
     <div> 
        <h1 id="title">TITLE</h1>   
        <img src="slider.png" id="slider-image" />
     </div>
 </section>
 <section class="second" data-type="background" data-speed="10" >
      ...

禁用指针事件对 Chromium 和 Mozilla 工作正常，但在 Chrome 中没有任何反应。

谢谢

Answer 1

Here 是对 CSS 指针事件支持的浏览器的概述。如您所见，chrome 和 IE 在您的代码中存在一个问题：

Moving the scrollbar on an object with pointer-events: none; works in Firefox, but doesn't work in either Chrome or IE.

一个可能的解决方法是遵循 this guide 通过层转发鼠标事件。

您可能还会发现 this post 有帮助。

防止 div 在 Chrome 中滚动

Prevent div scrolling in Chrome

css

scroll

google-chrome