jQuery/CSS:固定叠加不应该允许滚动背景？

Question

我有一个固定并在屏幕中心的覆盖盒.页面本身很长,有一个垂直滚动条.

我想在显示叠加层后禁用页面本身的滚动.但是我无法完全禁用滚动,因为有些叠加确实有overflow-y:scroll自己的功能.因此,应该滚动叠加层中的内容,但页面本身应该被卡住.

知道如何用jquery或css解决这个问题吗？

Answer 1

我能想到的最快最脏的方法是将事件监听器附加到窗口以进行滚动事件,如果覆盖图可见则将preventDefault()附加到.

像这样(使用jquery).

   window.addEventListener('scroll', function(e){
        var el = $('.overlay.active');

        if( el.length > 0 ){
            e.preventDefault();
        }   
   });

希望这是你想要的.