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

2018-10-07  本文已影响0人  hongi_k
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;
上一篇 下一篇

猜你喜欢

热点阅读