移动端禁止滚动

写在前面的话:

  在手机端常常遇到悬浮层,当悬浮层出现的时候手机的原来页面需要禁止滚动,而悬浮层可以滚动 的情况。


在移动端设置overflow:hidden为什么页面还能滚?要怎么禁止

http://blog.sina.com.cn/s/blog_4714e47801019f6o.html

 

今天用的是 fixed 的方法,下面几种方法的优劣待有空的时候来填~

方法一:

  把原来页面上滚动的div的position设置成fixed,然后top:0,或者top设为$(window).scrollTop()(或者设置一个想要的top值,因为可能含有头部的高度,而头部不在原来的滚动范围内),

方法二:

  把滚动的div的position设置成relative更好用些,再加overflow:hidden     fixed会有个坑,慎入~

方法三:

  ontouchmove,function(e){e.preventDefault();}

方法四:

  可以将你要隐藏滚动的内容加上一个包裹层div,然后给这个div设置高度为window.height(),并且overflow:hidden,就可以解决问题了

方法五:

  body{
    overflow: hidden;

    position:fixed;

   }


$(document).on('touchmove',function (e){
    e.preventDefault();
});
   

 

posted @ 2017-03-30 19:30  Chrisreen  阅读(1644)  评论(0编辑  收藏  举报