滚动带有触摸事件的页面

Question

I have a website page and I've added to the body of the page touch events. More exactly for swipe right and swipe left. Since the event listener is added to the body of the page and I have added event.preventDefault(); i can't scroll the page any more.

How can i scroll the page in the browser ?

PS The code is pure javascript / library agnostic.

Edit #1. This site viewed in mobile seems to do it http://swipejs.com/ . It slides the tabs right to left and back as well as scroll the website. I just can't seen in the code how :(

Answer 1

Use iscroll plugin. it's help to you.

see example : http://cubiq.org/dropbox/iscroll4/examples/simple/

Answer 2

Unfortunately there is no easy answer. The best way is to build smart gesture recognizers. Or use something like this (for Safari Mobile):

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

You will notice that when you are touching a gesture recognizer, there is no scrolling. However, you could make the callback of a recognizer scroll the page.

Wondering why it only says it supports Safari mobile? That's because Safari mobile has its own set of touch events. However, you can use it as a start and try to add support for other platforms.

Answer 3

I have the same problem that swiping without "preventDefault()". Because I want to achieve a pulltorefresh's effect, I can only prevent the pulldown event but not pullup. The code like this:

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" judges whether the event is pulldown and "document.body.scrollTop == 0" judges the scrollbar is in the middle or not. Maybe it can help you a little bit.