css - 防止 div 在 Chrome 中滚动

Question

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

pointer-events: none

我使用了视差，因此“第一”部分中图像和标题的顶部位置由它设置，但是当鼠标在此 block 上滚动时它会影响顶部位置

<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有帮助。