如何禁止浏览器滚动条滚动，但是又不让它消失？

星期四, 2016-10-27 13:36 — adminshiping1

最近做的项目需要用到带遮罩的弹出窗口。
要求是弹出来之后，后面的网页禁止滚动，只允许窗口内容的页面可以滚动。
于是我给body加上overflow: hidden;滚动条就没了。
但是这样导致了页面左右移动。
所以这种方式就不行，那还有什么办法能让滚动条一直都在，还不让它能滚动呢？

添加评论

默认排序按时间排序

7 个回答

TQ Tan 无敌点赞手。

1 人赞同

html,body{overflow–y:hidden;padding–right:17px;}

发布于 2014-03-01 5 条评论感谢收藏 • 没有帮助 • 举报 • 作者保留权利

于江水淘宝前端 http://yujiangshui.com

7 人赞同

自荐一篇文章再谈弹窗那些事

发布于 2014-03-28 1 条评论感谢收藏 • 没有帮助 • 举报 • 作者保留权利

檬一邪恶的代码

14 人赞同

     ; !function () {
        var keys = { 37: 1, 38: 1, 39: 1, 40: 1 };

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

        function preventDefaultForScrollKeys(e) {
            if (keys[e.keyCode]) {
                preventDefault(e);
                return false;
            }
        }
        var oldonwheel, oldonmousewheel1, oldonmousewheel2, oldontouchmove, oldonkeydown
        , isDisabled;
        function disableScroll() {
            if (window.addEventListener) // older FF
                window.addEventListener('DOMMouseScroll', preventDefault, false);
            oldonwheel = window.onwheel;
            window.onwheel = preventDefault; // modern standard

            oldonmousewheel1 = window.onmousewheel;
            window.onmousewheel = preventDefault; // older browsers, IE
            oldonmousewheel2 = document.onmousewheel;
            document.onmousewheel = preventDefault; // older browsers, IE

            oldontouchmove = window.ontouchmove;
            window.ontouchmove = preventDefault; // mobile

            oldonkeydown = document.onkeydown;
            document.onkeydown = preventDefaultForScrollKeys;
            isDisabled = true;
        }

        function enableScroll() {
            if (!isDisabled) return;
            if (window.removeEventListener)
                window.removeEventListener('DOMMouseScroll', preventDefault, false);

            window.onwheel = oldonwheel; // modern standard

            window.onmousewheel = oldonmousewheel1; // older browsers, IE
            document.onmousewheel = oldonmousewheel2; // older browsers, IE

            window.ontouchmove = oldontouchmove; // mobile

            document.onkeydown = oldonkeydown;
            isDisabled = false;
        }
        window.scrollHanlder = {
            disableScroll: disableScroll,
            enableScroll: enableScroll
        };
    }();

JS Demo（这是旧的 DEMO）
——————————————————————
修改，已简单测试。滚动条将显示，但无法滚动。

编辑于 2015-06-11 5 条评论感谢收藏 • 没有帮助 • 举报 • 作者保留权利

瞿宝明散打爱好，前端进阶

4 人赞同

正好项目需要，记录一下，方便遇到这个问题的朋友。

场景：点击按钮后弹出暗层，暗层上有组建需要滚动。需求是暗层里的组建可以使用滚动条，暗层下的不能同时滚动。

不能用overflow：hidden的方式，因为原来的必须可以滚动，如果暗层出来设置overflow：hidden的话会使视窗中的界面突然变宽。

最开始想的想法是禁止document的滚动，并且单独给弹窗内需要滚动的组建绑定事件，不冒泡上去。
最后发现不行，虽然document不滚动了，但是弹窗是position:fixed的，只要鼠标在弹窗的可滚动的元素上，当这个元素的滚动条到底部或者顶部时，暗层下面的东西还是会滚动，并且没有触发document的滚动。

解决方式是再给弹窗上的元素绑定滚动事件里面加限制条件：当弹窗中的元素的滚动条滚动到底部或者顶部时，判断滚动是向下还是向下。如果在顶部，且还在向上滚动，则禁止了默认事件。反之。

核心代码：

   if($(obj).innerHeight() + $(obj).scrollTop() >= obj.scrollHeight) {
        console.log('bottom');
        if(delta < 0) {
           console.log('to bottom!!');
           e.preventDefault();
           return false;
        }
    }
    if($(obj).scrollTop() === 0) {
        console.log('top');
        
        if(delta > 0) {
           console.log('to top!!');
           e.preventDefault();
           return false;
        }
    }