javascript - 苹果手机微信浏览器页面滑动问题

问题描述

问 题

做的一个手机端网站，在安卓手机上的时候没有问题，但是用苹果手机的话无论是微信浏览器，QQ浏览器，还是内置浏览器都会出现上下左右滑动页面会出现浏览器的背景，现在想要禁止这个效果该怎么办？不能禁止body的touch事件，因为有的页面比较长，要能通过上下滑动页面浏览下面的内容。所以不能用下面的代码：
$('body').on('touchmove', function (event) {
event.preventDefault();
});
或者只禁止页面的左右滑动事件也行。有木有大神啊。万分感谢。

解决方案

$('body').on('touchstart', function (event) {
    //起始位置
    //之前写成changedtouches了忘了大写
    oldX = event.changedTouches[0].clientX
    oldY = event.changedTouches[0].clientY
});
$('body').on('touchmove', function (event) {
    //新的位置
    newX = event.changedTouches[0].clientX
    newY = event.changedTouches[0].clientY
    //取绝对值,再来比 以免上滑动失效和左滑动生效（上滑动y的差值是负的，左同理）
    yValue = Math.abs(newY - oldY)
    xValue = Math.abs(newX - oldX)
    if(xValue>yValue){
        event.preventDefault()
    }
    //然后
    oldX=newX;
    oldY=newY;
});

然后一般做移动开发会禁用系统的滚动条，自己画。
有问题再说哈。。。毕竟没测试。
下面是双向滚动条都禁用的css。禁用单向的改下body的overflow为改为overflow-x或者overflow-y就行了，可以写个demo试一下。

html,body{
    width:100%;
    height:100%;
    overflow:hidden;
}

然后就是body内的内容再包一层，假如id="wrap"。
然后wrap绑定touch的那三个事件。检测手指位置。用transform3D变换来使wrap移动，达到滚动效果。至于要不要右边的滚动条。看你们的产品设计了。要的话画个div里面放个span跟着跑就行。
获取手指位置还是用event.changedTouches[0].clientX或clientY。

这篇关于javascript - 苹果手机微信浏览器页面滑动问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！