移动端弹出层,背景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;

你可能感兴趣的:(移动端弹出层,背景body禁止滑动)