Reputation: 3692
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
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