javascript - 如何使网页在微信上左右滑动时固定下来？

Question

如何使网页在微信上左右滑动时固定下来？
目前的情况是，在微信上打开网页，然后可以左右滑动页面。然后就可以看到微信的黑色背景。
如何让用户在左右拖动的时候，页面固定下来呢？
也就是不能左右滑动即可。

Answer 1

我觉得无解，这个是微信的浏览器的行为，js没法控制。

Answer 2

前段时间，我遇到类似的问题，也问了身边的大牛，如@朴灵，@寒冬等！他们的答案，准确的说应该是不能控制。

在iphone上，从左边框向右滑动进入视口并有一段距离，就会导致页面返回，从上边框向下则会拉出菜单栏。这是ios内置的手势行为，属于“系统”的。

同理对于微信，下拉黑板，左右滑动页面，在web代码层面上同样是不可控的。

Answer 3

如果可以左右滑动看到黑边，那是你的页面有元素超过移动端的宽度了，不然是只能上下滑动的。

Answer 4

document.addEventListener('touchmove', function(e) {

e.preventDefault();

});

Answer 5

改进楼上的方法,屏蔽默认的touchmove事件,在touchstart内记录手指的初始位置,在move事件内计算在y轴上的位移,再用代码控制窗口变动即可:

let that = this
    document.addEventListener('touchstart', (e) => {
      that.initY = e.targetTouches[0].pageY
    })
    document.addEventListener('touchmove', (e) => {
      e.preventDefault()
      // window.console.log(that.initY)
      let change = that.initY - e.targetTouches[0].pageY
      if (change !== 0) {
        document.body.scrollTop += change
      }
    })

注意:
要在css内设置body的overflow-x为hidden.