完美解决移动端滚屏问题

最新推荐文章于 2022-12-09 12:30:52 发布

wh_xmy

最新推荐文章于 2022-12-09 12:30:52 发布

阅读量995

点赞数

分类专栏： h5 微信公众号文章标签：移动端禁止滚屏遮罩层禁止滚屏

本文链接：https://blog.youkuaiyun.com/wh_xmy/article/details/102502838

版权

h5 同时被 2 个专栏收录

15 篇文章

订阅专栏

微信公众号

4 篇文章

订阅专栏

背景：移动端开发有弹出框时，下面页面还是可以滚动，本身也不是问题，但是有时候需要弹框出现，底部禁止滚动，如果需要，以下代码可以帮你实现效果：

// 在需要弹窗的代码里 调用stopBodyScroll ("true");
// 在关闭弹窗代码里 调用stopBodyScroll ();
    var  bodyEl = document.body;
    var  scrollTop = 0;
    function stopBodyScroll (isFixed) {
        bodyEl.style.left = '0';
        bodyEl.style.width = '100%';
        if (isFixed) {
            scrollTop = $(window).scrollTop();
            bodyEl.style.position = 'fixed';
            bodyEl.style.top = -scrollTop + 'px';
        } else {
            bodyEl.style.position = '';
            bodyEl.style.top = '';
            window.scrollTo(0, scrollTop) // 回到原先的top
        }
    }

以上代码可解决移动端滚屏问题，希望能对大家有用，另外欢迎评论区给出更加高效的方法，谢谢。