javascript - 在打开覆盖层时防止 body 滚动，没有跳到顶部，没有左/右跳？

Question

在打开叠加层(模态、侧边导航...)时防止正文滚动的最佳方法是什么？

我正在寻找可以解决以下问题的东西:

• 页面跳转到顶部(overflow:hidden on body)
• 滚动条消失时页面从右向左跳转(overflow:hidden on body)
• 在叠加层内继续滚动
• 可在移动设备和桌面设备上使用

我已经尝试过此处提出的解决方案:https://stackoverflow.com/a/24727206/8132424但它们似乎都不是完美的。

你有什么想法吗？我错过了什么吗？

Answer 1

检查下面的代码

 jQuery(document).ready(function($) {
            $('button').on('click', function(){
                $('.modal').addClass('active');
                $('body').addClass('modal-open');
            });
            $('.close').on('click', function(){
                $('.modal').removeClass('active');
                $('body').removeClass('modal-open');
            });
        });

        .body-container{
            max-width: 1200px;
            width:100%;
            margin:0 auto;
            background-color: #dddddd;
            padding:10px;
        }
.modal {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.3);
    justify-content: center;
    align-items: center;
    display: none;
}
.modal.active {
    display: flex;
}
.inner {
    background-color: #ffffff;
    padding: 20px;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
}
.close {
    position: absolute;
    right: -10px;
    top: -10px;
    background-color: #000000;
    height: 30px;
    width: 30px;
    color: #ffffff;
    text-align: center;
    border-radius: 50%;
    line-height: 30px;
    cursor: pointer;
}
.modal-open {
    overflow: hidden;
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="body-container">
        <button>Click</button>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, beatae molestias. Optio et atque consequatur. Aut ipsam, fuga nesciunt perspiciatis accusamus consequatur culpa omnis. Error fuga accusantium voluptatem magni.
    </div>
    <div class="modal">
       <div class="inner">
        <span class="close">X</span>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque optio numquam consequatur, nostrum saepe rerum explicabo dignissimos quos maxime amet, qui repudiandae perferendis vel, id quaerat, quidem quo ad! Ipsum!
       </div>
    </div>