H5移动端禁止页面左右滑动

Posted 2023-04-04

参考技术A 给页面加标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
如果加了标签还不行，可能是因为有的时候如果页面内部的某些元素超出了设备宽度之外，也会导致可以移动，这这属于css布局的问题。

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