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

原创
2017/06/14 17:30
阅读数 988

页面有弹出层,当弹出层内容滚动时会带着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);
                }
            });
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部