如何禁止手机浏览器、微信浏览器的上下滑动问题

Question

当我使用手机浏览器或者微信浏览器打开网页的时候，上下滑动页面，页面就会出现黑色的空白(如图所示)。我应该怎么做才能禁止滑动。因为他现在和我的上下滑动手势冲突了，无法进行滑动操作。

Answer 1

自问自答。事件监听添加禁止。

<script type='text/javascript'>
document.querySelector('body').addEventListener('touchstart', function (ev) {
    event.preventDefault();
});
</script>

顺便说一下preventDefault()。

该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。

换句话说，就是将这个元素的专属动作禁止。
我见过有一些插件是这么写的。

$(document).on($('a'),'click',function(event){
    event.preventDefault();    
})

目的就是禁止的跳转。也就说明了event.preventDefault();可以禁止a元素的专属动作。

Answer 2

加这个属性 style="touch-action: pan-x;"

Answer 3

网上所有的方法大概都试了下 要么不行 要么有兼容问题,下面直接一句css解决了问题:

body:before {

width: 100%;
height: 100%;
content: ' ';
position: fixed;
z-index: -1;
top: 0;
left: 0;
background: #fff;

}

Answer 4

我按照你的代码 ，做了测试。

微信浏览器 是不能上下滑动了。

但是 ， 现在遇到个问题。

现在 页面里面也无法滚动了。

你那边有遇到这样的问题吗？？

Answer 5

大神 把你的代码复制上为什么不好使啊？求指导

Answer 6

你可以监听页面滑动的距离，当滑动到顶部的时候，你就把滑动的距离用一个变量接收到，然后用transform:translateY(-y);（y就是那个变量的值）意思就是你滑动到顶部了，滑动一点距离，你就把网页上移一点距离，这样子，那个背景就不会显示出来了（感觉应该可以实现吧，只是可能会出现不流畅的效果，没有亲测过）

Answer 7

为了解决ios的弹性滚动和微信冲突导致列表触顶后很难滚动，在android并没有阻止微信的弹性滚动

let scrollEle = document.body;
scrollEle.addEventListener('touchstart', (evt) => {
    // 修复微信的黑色弹性滚动与ios冲突问题
    let scrollTop = scrollEle.scrollTop;
    let scrollHeight = scrollEle.scrollHeight;
    let height = scrollEle.offsetHeight;
    let scrollTopTo;

    // 顶部
    scrollTopTo = Math.max(scrollTop, 1);

    // 底部
    if(scrollTopTo === scrollHeight - height) {
      scrollTopTo--;
    }

    if(scrollTop != scrollTopTo) {
      scrollEle.scrollTop = scrollTopTo;
    }
});

原理：因为微信的弹性触发机制是手指按下时，scroll元素是否触顶。因此为了避免触发此特性，当手指按下时将scroll元素上移1px，这样就无法触发微信的弹性滚动，但是此时ios的弹性滚动依然生效。
底部的情况由于ios弹性滚动能够使scrollTop超过可滚动距离，因此只判断严格的触底条件即可。

Answer 8

https://my.oschina.net/u/1052... 亲测有效，并没有取消其他事件的默认绑定事件

Answer 9

<meta name="x5-fullscreen" content="true">
<meta name="full-screen" content="yes">

一直不太建议为了一些体验的问题来使用全局监听touch事件，这会让页面里的其他元素的一些属性出现问题。
加上这两个meta放在head里，可以让微信，qq，uc浏览器使用全屏模式，全屏模式里，浏览器是不会上下左右滑动出现背景的。

Answer 10

http://www.zhangxinxu.com/wor...
张鑫旭大神的这篇博客给的方法很好用，推荐

Answer 11

楼上有说“禁止touch默认事件”太粗暴，这导致div里面不能滚动，跟touch相关的事件都失效了。
当你需要div内部内滑动，但是滑动到边缘时禁止滑动（禁止浏览器的滑动前进与后退功能触发），那么只需要滑动方向与滑动距离即可，距离：

div.addEventListener("touchstart",function(e){
    scroll_start = e.changedTouches[0].clientX;
});
div.addEventListener("touchmove",function(e){
    // 判断滑动的方向，只在滑动到边缘且用户继续往左滑动时禁止默认事件
    if(div.scrollLeft===0&&e.changedTouches[0].clientX-scroll_start>0){
        e.preventDefault && e.preventDefault();
        e.returnValue = false;
        e.stopPropagation && e.stopPropagation();
        return false;
    }
});

判断滑动的方向，只在滑动到边缘且用户继续往左滑动时禁止默认事件。

Answer 12

亲测有效，替换overscroll(document.querySelector('你需要滚动的元素'));
https://github.com/luster-io/...

Answer 13

这个问题我是通过iscroll.js插件配合css实现的，选择body里的所有内容进行滚动，同时加上属性
myScroll = new IScroll('#wrapper',{

    bounce: false,
});

还要加上document.addEventListener('touchmove', function (e) { e.preventDefault(); }, isPassive() ? {

capture: false,
passive: false

} : false);

Answer 14

如果是没有滚动条的页面可以 禁止滑动事件
$('body').on('touchmove', function (event) {

event.preventDefault();

});

Answer 15

请问下楼主怎么解决的？