通过触摸事件滚动页面

Question

我有一个网站页面，我已将触摸事件添加到页面正文中。 更准确地说，是向右滑动和向左滑动。由于事件侦听器已添加到页面正文，并且我添加了 event.preventDefault();我无法再滚动页面了。

如何在浏览器中滚动页面？

附注该代码是纯 JavaScript/库无关的。

编辑#1。在移动设备上查看的这个网站似乎可以做到这一点http://swipejs.com/。它将选项卡从右向左和向后滑动以及滚动网站。我只是在代码中看不到:(

Answer 1

不幸的是，没有简单的答案。 最好的方法是构建智能手势识别器。或者使用类似的东西（对于 Safari Mobile）：

http://mud.mitplw.com/JSGestureRecognizer/#single-gesture

您会注意到，当您触摸手势识别器时，没有滚动。但是，您可以使识别器的回调滚动页面。

想知道为什么它只说支持 Safari 移动版？这是因为 Safari 移动版有自己的一组触摸事件。但是，您可以使用它作为起点，并尝试添加对其他平台的支持。

Answer 2

使用

iscroll

插件。对你有帮助。

参见示例：http://cubiq.org/dropbox/iscroll4/examples/simple/

Answer 3

我有同样的问题，在没有“preventDefault()”的情况下刷卡。因为我要实现一个pulltorefresh的效果，所以只能阻止pulldown事件，不能阻止pullup。代码如下：

function touchBindMove(evt){
    //evt.preventDefault();
    try{
        var deviceHeight = window.innerHeight;
        var touch = evt.touches[0]; //获取第一个触点  
        var x = Number(touch.pageX); //页面触点X坐标  
        var y = Number(touch.pageY); //页面触点Y坐标  
        //记录触点初始位置  

        if((y - offsetStart) > 0 && document.body.scrollTop == 0){
            evt.preventDefault();
            var page = document.getElementsByClassName('tweet-page')[0];
            var rate = 0;

            end = x;
            offsetEnd = y;
            rate = (offsetEnd - offsetStart) / (2 * deviceHeight);

            //tool.print(rate);
            easing.pullMotion(page, rate);
        }

    }catch(e){
        alert(e.message);
    }
}

“y - offsetStart”判断事件是否下拉，“document.body.scrollTop == 0”判断滚动条是否在中间。 或许能帮到你一点点。