前端临时禁止滚动条的解决方案

Posted zhensg123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端临时禁止滚动条的解决方案相关的知识,希望对你有一定的参考价值。

       有一些场景,比如弹窗,比如商品的抛物线效果,为了更好的前端用户体验,要求临时禁止滚动条的滚动。

       参考了前辈的一些经验,比如这位:https://yujiangshui.com/review-how-to-make-popup-mask-effect/。现做如下总结。

       方案1,最为简单粗暴的方式当然是直接将dom的body挂一个样式即overflow:hide。

document.body.style.cssText = ‘overflow-y:hidden‘;

  基本思路:需要禁止时执行上面代码,禁用解除则用

document.body.style.cssText = ‘overflow-y:auto‘;

  但上述方案存在一个问题,就是页面内容抖动,这产生了不好的前端操作体验。

       方案2,采用jquery的解决方案,jquery作为老牌的js库,自带禁用功能。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>jquery实现方案</title>
</head>

<body>
    <div style="height: 200px;width: 100%;">
    </div>
    <div style="text-align: center;">
        <button id="btn">点我测试</button>
    </div>
    <div style="width: 100%;height: 1200px;">这是用开显示滚动条的</div>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    function unScroll() {
        var top = $(document).scrollTop();
        $(document).on(‘scroll.unable‘, function(e) {
            $(document).scrollTop(top);
        })
    }
    //移除禁止滚动条滚动
    function removeUnScroll() {
        $(document).unbind("scroll.unable");
    }
    $("#btn").click(function() {
        unScroll();
        setTimeout(function() {
            removeUnScroll();
        }, 5000)
    })
    </script>
</body>

</html>

  注意引入jquery,测试觉得还有有些小问题。

       方案3,采用css的overflow设置结合padding-right的方案。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>另一种方式禁用</title>
</head>

<body>
    <div style="height: 200px;width: 100%;">
    </div>
    <div style="text-align: center;">
        <button id="btn">点我测试</button>
    </div>
    <div style="width: 100%;height: 1200px;">这是用开显示滚动条的</div>
    <script type="text/javascript">
    document.getElementById(‘btn‘).addEventListener(‘click‘, function() {
        document.body.style.cssText = "overflow-y:hidden;padding-right:17px;";
        setTimeout(function() {
            document.body.style.cssText = "overflow-y:auto;padding-right:0px;";
        }, 2000)
    });
    </script>
</body>

</html>

  但是部分浏览器的padding-right不为17px;所以产生了方案4。

       方案4,就是动态设定padding-right值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>另一种方式禁用</title>
    <style type="text/css">
    .box-lock-test {
        overflow-y: hidden !important;
    }
    </style>
</head>

<body>
    <div style="height: 200px;width: 100%;">
    </div>
    <div style="text-align: center;">
        <button id="btn">点我测试</button>
    </div>
    <div style="width: 100%;height: 1200px;">这是用开显示滚动条的</div>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    document.getElementById(‘btn‘).addEventListener(‘click‘, function() {
        // var w1 = $(window).width();
        // $(‘html‘).addClass(‘box-lock-test‘);
        // var w2 = $(window).width();
        // $(‘html‘).removeClass(‘box-lock-test‘);

        var w1 = $(window).width();
        $(‘body‘).addClass(‘box-lock-test‘);
        var w2 = $(window).width();
        $(‘body‘).removeClass(‘box-lock-test‘);
        // document.documentElement.style.cssText = `overflow-y:hidden;padding-right:${w2-w1}px;`;
        // setTimeout(function() {
        //     document.documentElement.style.cssText = "overflow-y:auto;padding-right:0px;";
        // }, 2000)
        document.body.style.cssText = `overflow-y:hidden;padding-right:${w2-w1}px;`;
        setTimeout(function() {
            document.body.style.cssText = "overflow-y:auto;padding-right:0px;";
        }, 2000)
    });
    </script>
</body>

</html>

  如上。

       但在具体的开发应用中,发现一些问题,针对overflow的,原因是dom的html和body元素高度塌陷。要使用overflow需要特别留意一下这点。

 

以上是关于前端临时禁止滚动条的解决方案的主要内容,如果未能解决你的问题,请参考以下文章

CSS 禁止滚动条(隐藏或屏蔽IE滚动条的几种常用方法)

移动端在有弹出层时如何禁止底层的滚动

前端(浏览器兼容性Ie与chrome)之滚动条的隐藏

原生js禁止页面滚动

VC中怎么滚动条宽度怎么解决

Firefox和IE滚动条的定制设计[重复]