PC端,移动端禁止页面滚动
2016-07-31 13:49
1456 查看
说明:
1.这里只总结页面禁止滚动的方法,可根据实际需求用js动态控制即可。
2.移动端能禁,PC自然能禁,但PC能禁,移动端不一定能禁,所以我着重讲移动端
3.代码演示我用的zepto(或许你不会用,但是一定可以看懂)
序言:
大家在做移动端开发的时候,难免会有禁止页面滚动的需求,今天我就总结下移动端禁止页面滚动的方法,希望有一种能满足你的需求场景。
1.
2.
3.
4.点击页面,页面在点击的位置静止,之后滑动滚动无效
5.移动端的救世主方法,如果你有相关开发经验,会发现前面的方法在移动端神奇的失效,那么这个方法一定可以帮到你
结语:
不积跬步,无以至千里,不积小流,无以成江河,前端路漫漫~
在此多谢杰哥指点的救世主方法
1.这里只总结页面禁止滚动的方法,可根据实际需求用js动态控制即可。
2.移动端能禁,PC自然能禁,但PC能禁,移动端不一定能禁,所以我着重讲移动端
3.代码演示我用的zepto(或许你不会用,但是一定可以看懂)
序言:
大家在做移动端开发的时候,难免会有禁止页面滚动的需求,今天我就总结下移动端禁止页面滚动的方法,希望有一种能满足你的需求场景。
1.
$(document).on('touchmove', function(e){ e.preventDefault(); })
2.
body{ position: fixed; //根据需求添加top,left... }
3.
body{ overflow: hidden; /*height: 100%;*/ }
4.点击页面,页面在点击的位置静止,之后滑动滚动无效
//根据这个思路,你也可以去应用于元素的禁止滚动 $('body').on('tap', function(e){ $(this).css('top', ('-' + $(window).scrollTop() + 'px')); $(this).css('position', 'fixed'); })
5.移动端的救世主方法,如果你有相关开发经验,会发现前面的方法在移动端神奇的失效,那么这个方法一定可以帮到你
html,html{ overflow: hidden; height: 100%; }
结语:
不积跬步,无以至千里,不积小流,无以成江河,前端路漫漫~
在此多谢杰哥指点的救世主方法
相关文章推荐
- 用jq让移动端和PC端遮罩层弹出后页面禁止滚动
- 移动端和PC端遮罩层弹出后,页面禁止滚动的解决方法
- 禁止页面滚动(移动端)
- 移动端h5页面弹窗出来后,禁止底层的背景页滚动
- 移动端禁止页面滚动
- jquery 禁止页面滚动-移动端
- js禁止和启用移动端页面内容滚动
- PC端/移动端如何禁止底层页面滚动
- 移动端页面 弹出框滚动,底部body锁定,不滚动 / 微信网页禁止回弹效果
- 移动端弹出层上禁止页面滚动
- 移动端页面禁止鼠标滑轮滚动的方法
- 解决禁止浏览器回弹效果后页面其它元素滚动事件失效
- jquery 禁止滚动条滚动,并且滚动条不消失,页面大小不闪动
- H5禁止页面滑动/滚动
- 如何判断页面是PC端访问或者移动端访问
- js实现禁止pc端浏览器缩放和获取当前页面浏览器的缩放大小
- 如何禁止页面滚动事件
- 微信小程序弹出自定义模态框,禁止底部页面滚动事件
- 解决移动端web页面整个背景图横向滚动问题
- 移动端touchstar、touchmove、touchend 事件如果页面有滚动时不让触发 touchend 事件。