Front-end solutions for the temporary ban scroll bar

There are some scenes, such as pop, such as parabolic effect of the commodities, in order to better front-end user experience, the requirements of the scroll bar to scroll the temporary ban.

Reference some experience of their predecessors, such as this: https://yujiangshui.com/review-how-to-make-popup-mask-effect/ . Now summarized as follows.

1 embodiment, the simplest crude way is of course directly linked to a style of dom body i.e. overflow: hide.

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

　　The basic idea: the implementation of the above code when needed prohibited, with the lifting of disabled

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

　　But there is a problem in the above scheme, the page content is jitter, which creates a bad front-end operating experience.

Scenario 2, using jquery solution, as a veteran of jquery js library comes with disable function.

<!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);
        })
    }
    // remove the ban scroll bar to scroll 
    function removeUnScroll () { 
        $ (the Document) .unbind ( "scroll.unable"); 
    } 
    $ ( "# btn") the Click (function () {. 
        UnScroll (); 
        the setTimeout (function ( ) { 
            removeUnScroll (); 
        }, 5000) 
    }) 
    </ Script> 
</ body> 

</ HTML>

　　Note that the introduction jquery, test think there are some small problems.

Scheme 3, using the overflow css padding-right setting binding solution.

<! DOCTYPE HTML> 
<HTML lang = "EN"> 

<head> 
    <Meta charset = "UTF-. 8"> 
    <title> Another way to disable </ title> 
</ head> 

<body> 
    <div style = " height: 200px; width: 100%; "> 
    </ div> 
    <div style =" text-align = left: Center; "> 
        <Button ID =" BTN "> point I tested </ Button> 
    </ div> 
    <div style = "width: 100%; height : 1200px;"> this is the opening and display of the scroll bar </ div> 
    <Script type = "text / JavaScript"> 
    . document.getElementById ( 'BTN') the addEventListener ( 'the Click', function () { 
        document.body.style.cssText = "Y-overflow: hidden;padding-right:17px;";
        setTimeout(function() {
            document.body.style.cssText = "overflow-y:auto;padding-right:0px;";
        }, 2000)
    });
    </script>
</body>

</html>

　　However, part of the browser is not padding-right 17px; 4 program is generated.

Scheme 4, is set dynamically padding-right value

<! DOCTYPE HTML> 
<HTML lang = "EN"> 

<head> 
    <Meta charset = "UTF-. 8"> 
    <title> Another way to disable </ title> 
    <style type = "text / CSS"> 
    .box {-Test -lock 
        overflow-Y: Important hidden;! 
    } 
    </ style> 
</ head> 

<body> 
    <div style = "height: 200px; width: 100%;"> 
    </ div> 
    <div style = " text-align = left: Center; "> 
        <Button ID =" BTN "> point I tested </ Button> 
    </ div> 
    <div style =" width: 100%; height: 1200px; "> this is the opening and display scroll bars the </ div> 
    <Script of the type = "text/javascript" src="jquery.js"></script>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>

　　Above.

But in the specific development application, we found some problems, for the overflow, because dom of html and body element height collapse. To use the overflow needs to pay special attention to this point.

Front-end solutions for the temporary ban scroll bar

Guess you like