移动端禁止滚动

帅比萌擦擦* 提交于 2020-03-15 19:39:20

写在前面的话:

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


在移动端设置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();
});
   

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!