移动端弹出层,背景body禁止滑动

1、弹出层内无需滑动效果
//box:弹出层背景元素
box.addEventListener('touchmove', function(e){
   e.preventDefault()
})
2、背景禁止滑动,弹出层内可以滑动

js部分

//点击出现弹出层
$('.child').on('click',function(){
    var top=$(window).scrollTop();     
    $('html').css({'overflow':'hidden','position':'fixed','top': -top+'px'})
})
//关闭弹出层时
$('.close').on('click', function() {
    $('html').css({'overflow': 'auto','position': 'static'});
    $('html,body').scrollTop(top);
})

进一步若想要使滑动更加顺畅,在滚动时模拟原生的弹性滚动效果
可以在滚动元素时加一句css

-webkit-overflow-scrolling : touch;
overflow-y:auto;
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容