zoukankan      html  css  js  c++  java
  • 前端临时禁止滚动条的解决方案

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

           参考了前辈的一些经验,比如这位: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; 100%;">
        </div>
        <div style="text-align: center;">
            <button id="btn">点我测试</button>
        </div>
        <div style=" 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; 100%;">
        </div>
        <div style="text-align: center;">
            <button id="btn">点我测试</button>
        </div>
        <div style=" 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; 100%;">
        </div>
        <div style="text-align: center;">
            <button id="btn">点我测试</button>
        </div>
        <div style=" 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需要特别留意一下这点。

  • 相关阅读:
    grunt in webstorm
    10+ Best Responsive HTML5 AngularJS Templates
    响应式布局
    responsive grid
    responsive layout
    js event bubble and capturing
    Understanding Service Types
    To add private variable to this Javascript literal object
    Centering HTML elements larger than their parents
    java5 新特性
  • 原文地址:https://www.cnblogs.com/zhensg123/p/11640757.html
Copyright © 2011-2022 走看看