JavaScript如何屏蔽页面的滚动?

civerzhu
  • 1.2k

如题。举个例子吧:写一个弹窗组件,弹窗未出现时页面可以滚动,弹窗出现后弹窗这一层的下面就不能滚动(但弹窗里的内容能滚动)。

回复
阅读 49.3k
7 个回答
//**********************  Start with disable/enable scroll function  **********************
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36

var keys = [37, 38, 39, 40];

function preventDefault(e) {
    e = e || window.event;
    if (e.preventDefault)
        e.preventDefault();
    e.returnValue = false;
}

function keydown(e) {
    for (var i = keys.length; i--;) {
        if (e.keyCode === keys[i]) {
            preventDefault(e);
            return;
        }
    }
}

function wheel(e) {
    preventDefault(e);
}

function disable_scroll() {
    if (window.addEventListener) {
        window.addEventListener('DOMMouseScroll', wheel, false);
    }
    window.onmousewheel = document.onmousewheel = wheel;
    document.onkeydown = keydown;
}

function enable_scroll() {
    if (window.removeEventListener) {
        window.removeEventListener('DOMMouseScroll', wheel, false);
    }
    window.onmousewheel = document.onmousewheel = document.onkeydown = null;
}

//**********************  End with disable/enable scroll function  **********************

Hope this helps

下面这段代码可以(...js)屏蔽滚轮, 不过对于浏览器兼容性不太确定

handler = (event) -> event.preventDefault()
document.body.addEventListener 'mousewheel', handler
setTimeout ->
  document.body.removeEventListener 'mousewheel', handler
, 4000

目前能想到的有

  1. 阻止所有能导致页面滚动的事件。 //scroll不能阻止,只能阻止mousewheel,鼠标拽滚动条就悲剧了
  2. body overflow:hidden //win下右侧滚动条会消失导致页面横移,移动端阻止不了
  3. 把滚动部分单独放在一个div里,和弹出部分同级,body和window同高。 //所有涉及offset/scrollTop的方法都要修改。fix并且width100%的元素(比如微博顶栏)会压在内容区滚动条上
  4. 弹出时算scrollTop,给内容区fix然后top移动到目前位置,同时body给一个overflow-y:scroll强撑出滚动条。

需要你对overflow这个css属性熟悉。弹窗时设置body的css样式overflow:hidden。弹窗要能滚动的话设置overflow:auto。即可。

对body设置overflow:hidden

你知道吗?

宣传栏