CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-mobile
benqus
benqus

Reputation: 1139

scrolling different elements (div style="overflow-y: auto") on mobiles and tablets

=]

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

Upvotes: 0

Views: 8540

Answers (4)

benqus
benqus

Reputation: 1139

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... =)

Upvotes: 4

SzilardD
SzilardD

Reputation: 1751

iOS 5 has support for overflow:scroll and overflow:auto. You just have to add this CSS rule and the scroll should work:

-webkit-overflow-scrolling: touch;

Upvotes: 1

Jasper
Jasper

Reputation: 75993

Mobile implementation of overflow: scroll is horrible...

You can use two fingers on an iOS device but users generally don't know that, and pre-Honeycomb Android operating systems don't have any implementation for overflow: scroll and just clip the overflow like overflow: hidden. Even the Honeycomb implementation is apparently choppy and not a good user experience.

You can use one of a few pre-made JavaScript based packages that try to implement cross-platform scrolling but they generally fall short of a "stellar user experience."

jQuery Mobile has an experiement called "Scrollview" and iScroll is one that comes to mind.

--EDIT--

I just came across a JavaScript Library named Wink that has a nice scrollable area plugin. Check-out Wink Toolkit.

Upvotes: 0

Paul D. Waite
Paul D. Waite

Reputation: 98786

When I'm trying to test it on mobile (or tablet) the divs don't want to scroll.

What are you trying in order to make them scroll? If you‘re trying to make them scroll from your code, we’ll need to see the code.

(If on the other hand you’re trying to make them scroll via user-interaction, on iOS you can scroll individual scrollable elements on the page by dragging with two fingers instead of one.)

Upvotes: 0

Related Questions