ProNotion
ProNotion

Reputation: 3692

DragScroll For Touch Devices like Mobile / iPad

I have developed an Electronic Programming Guide which I'm happy with on the desktop however I'm unable to get the drag and scroll working on touch devices.

I am using the following plugin for the drag and scroll functionality on the desktop:

http://hitconsultants.com/dragscroll_scrollsync/dragscrollable.js

I added the jquery mobile library to the project in the hope that I could leverage that by adding the virtual mouse events to the dragscrollable plugin e.g. vmousemove, vmouseup, vmousedown however it's not had the desired effect and I am still stuck with no drag scroll.

Here is an example of my setup:

http://jsbin.com/ImejohuH/14/edit?js,output

Upvotes: 0

Views: 955

Answers (1)

ProNotion
ProNotion

Reputation: 3692

I actually managed to resolve this purely by accident when adding a minimal build of Modernizer to check for touch devices so that I could set overflow-x: scroll on the container to allow scrolling on touch devices.

This is all that was required:

Add a script reference to modernizer.js. My specific build can be got from here and is just a minimal build with touch events and CSS classes.

You then need to perform a check for touch devices and if true we set the overflow-x css property to auto as follows:

$(function() {
    if (Modernizr.touch) {
        $("#mycontainer").css("overflow-x", "auto");
    }
});

The result I found in my tests were actually very pleasing because you don't get a horrible chunky scrollbar like you do on a desktop machine and so the solution works well.

Upvotes: 1

Related Questions