Question

我有一个网站页面，我已经添加到页面触摸事件的主体。更准确地说，向右滑动并向左滑动。由于事件监听器被添加到页面主体并且我添加了event.preventDefault（）;我不能再滚动页面了。

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

P.S。代码是纯粹的javascript /库无关。

编辑＃1。在移动设备上查看此网站似乎是http://swipejs.com/。它可以向右和向左滑动标签以及滚动网站。我只是在代码中看不到如何:(

Answer 1

使用iscroll插件。这对你有帮助。

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

Answer 2

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

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

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

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

Answer 3

我遇到的问题是在没有“preventDefault（）”的情况下滑动。因为我想达到一个pulltorefresh的效果，我只能阻止下拉事件而不是上拉。像这样的代码：

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”判断事件是否为pulldown，“document.body.scrollTop == 0”判断滚动条是否在中间。也许它可以帮到你一点点。

使用触摸事件滚动页面

3 个答案: