Question

=]

Here’s the thing:

We’re developing a webapplication with HTML5/CSS3/JavaScript/jQuery technologies. When I test it in my desktop PC’s browser, everything is cool and fully functional. That’s not the problem. =]

But… And here’s the problem where I’m stuck with currently…

When I’m trying to test it on mobile (or tablet) the divs don’t want to scroll. I know that mobiles (and tablets) handle events differently, they have (sometimes, somewhat) different events getting

We don’t have too much time to get over with this (as usual -_- ), but still, we have to bring a solution. We don’t want to create another UI for NOT dekstop hardwares, so I’m looking for a solution which can be triggered by “chaining” the mobile event handlers together with the basic events.

We’re using div‘s and CSS properties overflow-x, overflow-y which need to be scrolling on mobile (and also tablet) devices. What would you recommend? how would you do it? Which would be the perfect and time-effitient method?

Thank you in advance for answering! =]

Best for everybody,
Ben

Answer 1

Thanks for the helps guys, but I’ve already found the way of doing this. =) I’m gonna share it with you, so you’ll know.

First of all, Android 3.x tablets do have scrolling divs.

But to make it work on 2.2 and ipad: Here’s the code I’ve been using (click on me!)

So you just pass the id of the div you want to scroll for the touchScroll() method (after of corse including on your html’s head) et voilá! =)

I’ve also extended the code (copy > paste code) with another function which accepts an element:

function touchScrollElement(element){
    if(isTouchDevice()){
        var scrollStartPosY=0;
        var scrollStartPosX=0;

        element.addEventListener("touchstart", function(event) {
            scrollStartPosY=this.scrollTop+event.touches[0].pageY;
            scrollStartPosX=this.scrollLeft+event.touches[0].pageX;
        },false);

        element.addEventListener("touchmove", function(event) {
            if ((this.scrollTop < this.scrollHeight-this.offsetHeight &&
                this.scrollTop+event.touches[0].pageY < scrollStartPosY-5) ||
            (this.scrollTop != 0 && this.scrollTop+event.touches[0].pageY > scrollStartPosY+5))
                event.preventDefault();
            if ((this.scrollLeft < this.scrollWidth-this.offsetWidth &&
                this.scrollLeft+event.touches[0].pageX < scrollStartPosX-5) ||
            (this.scrollLeft != 0 && this.scrollLeft+event.touches[0].pageX > scrollStartPosX+5))
                event.preventDefault();
            this.scrollTop=scrollStartPosY-event.touches[0].pageY;
            this.scrollLeft=scrollStartPosX-event.touches[0].pageX;
        },false);
    }
}

So that’S the current solution… =)