移动端页面弹出框滚动，底部body锁定不滚动

最新推荐文章于 2024-03-04 18:43:06 发布

weixin_34238642

最新推荐文章于 2024-03-04 18:43:06 发布

阅读量371

点赞数

文章标签： python

原文链接：https://my.oschina.net/qingtianjun/blog/956536

版权

2019独角兽企业重金招聘Python工程师标准>>>

页面有弹出层，当弹出层内容滚动时会带着body一起滚动。大多数人会用户iscroll扩展来解决这个问题，但是简单的解决问题只能麻烦一点做效果了。


//body设置为fixed之后会飘到顶部，所以要动态计算当前用户所在高度
            var scrollTop = $('body').scrollTop();
            $('body').css({"overflow":"hidden","position":"fixed","top": scrollTop*-1});

            layer.open({
                anim: 'up',
                style: 'position:fixed;left:0;top:10%;height:90%;width:100%;border: none; -webkit-animation-duration: .5s; animation-duration: .5s;overflow:auto;',
                end: function(){
//弹出框关闭后设置回来
                    $('body').css({"overflow":"auto","position":"static","top":"auto"});
//弹出框关闭后滚动到原来的位置
                    $("body").animate({scrollTop:scrollTop},0);
                }
            });

转载于:https://my.oschina.net/qingtianjun/blog/956536