前端 - JavaScript如何屏蔽页面的滚动？

Question

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

Answer 1

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

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

Answer 2

//**********************  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

Answer 3

目前能想到的有

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

Answer 4

对body设置overflow:hidden

Answer 5

这样？
http://jsfiddle.net/RayLiao/KrK7m/

搭个车顺便问一下，jsfiddle怎么样不显示或者调整tab的顺序啊？

Answer 6

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