H5移动端禁止页面上下滚动

Posted 2023-04-12

参考技术A 当内容超过元素容器的高度时，滚动条就会出现，这是为了让超过内容也能显示设计。

但有时候，我们不希望滚动条出现，我们就是想要超过容器部分不再显示，这时需要加一些命令，告诉浏览器我们的需要。

javascript移动端禁止页面滑动的解决方案

1 前言

移动端网页，发现ios平台的iphone或者ipad，网页可以上下左右移动，而Android版则不会。仅作为记录使用。

2 代码

var mo=function(e){e.preventDefault();};
function stop(){
        document.body.style.overflow=‘hidden‘;        
        document.addEventListener("touchmove",mo,false);//禁止页面滑动
}
//直接默认不让滑动
stop();


/***取消滑动限制***/
function move(){
        document.body.style.overflow=‘‘;//出现滚动条
        document.removeEventListener("touchmove",mo,false);        
}

3 参考

1.移动端禁止页面滑动（有效）

4 扩展

1.js开启和禁止页面滑动

2.webApp中防止页面出现上下滑动的方法(测试无效)

3.移动端上下滑动事件之--坑爹的touch.js