CODEWITHSUNDEEP
javascripthtmlmobilescrolltouch
Teddy
Teddy

Reputation: 65

Scroll a page with touch events

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 ?

P.S. 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 :(

Upvotes: 5

Views: 8710

Answers (3)

Scott Huang
Scott Huang

Reputation: 1

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.

Upvotes: 0

Temüjin
Temüjin

Reputation: 15548

Use iscroll plugin. it's help to you.

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

Upvotes: 0

Adam Lockhart
Adam Lockhart

Reputation: 1195

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.

Upvotes: 0

Related Questions