使用触摸事件滚动页面

Question

我有一个网页，我在页面主体中添加了触摸事件。更确切地说是向右滑动和向左滑动。由于事件侦听器已添加到页面的主体，并且我已经添加了event.preventDefault();，所以我无法再滚动页面。

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

附注：代码纯JavaScript /不使用库。

编辑＃1。在移动设备上查看此站点似乎可以http://swipejs.com/。 它将选项卡从右向左滑动并向后滚动网站。 我只是不知道如何在代码中实现。

- Teddy

Answer 1

使用 iscroll 插件，它会对你有所帮助。

查看示例：http://cubiq.org/dropbox/iscroll4/examples/simple/

- Temüjin

---

看起来不错，但我还是希望自己能编写代码。 - Teddy

@Teddy，很高兴看到有人不满足于使用第三方库/简单的方法。太多人在看到一个糟糕的jQuery插件链接后就选择了kthxbai，而根本问题得不到解决。不过，iScroll 5看起来还不错，至少快速浏览了一下。顺便说一句，iScroll现在有自己的域名：http://iscrolljs.com - jpeltoniemi

Answer 2

我有一个和“preventDefault()”无关的问题。因为我想要实现下拉刷新的效果，所以我只能阻止下拉事件而不能阻止上拉事件。代码如下：

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" 判断滚动条是否在中间。 也许这能对你有所帮助。

- Scott Huang

---

请返回翻译文本：//获取第一个触点 - Tushar Gupta - curioustushar

嘿，我一段时间前已经解决了这个问题，并将项目开源。这是关于它的git存储库。下载代码并查看吧。你会在里面找到这个函数 https://github.com/boxbreakout/menujs - Teddy

Answer 3

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

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

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

想知道为什么它只支持Safari移动版吗？那是因为Safari移动版有自己的一套触摸事件。不过，您可以将其用作起点，尝试为其他平台添加支持。

- Adam Lockhart

---

这也是我所思考的。我已经添加了一个函数来计算角度，以区分向左/向右滑动。我可以使用同样的方法并创建一个用于上下滚动的函数。我只是希望有更简单/更安全的方法，这样我就可以节省脚本大小。 - Teddy