I'm using iScroll4 to create a horizontal scroll effect on an image within a mobile website. iScroll works fantastic, but the problem is the image contained in the iScroll wrapper disables native vertical scrolling. In other words, a user's finger swipe to navigate the page is disabled anywhere within the iScroll wrapped image.
SwipeView may be able to solve this problem, but the documentation (atleast for me) is not that clear. Does anyone know how to effectively use SwipeView on an iScroll wrapped image?
I've found the documentation to be terribly lacking as well but something like this works for me:
This initialises iScroll on your current SwipeView page upon swiping to it. Horizontal iScroll-scrolling is disabled which leaves that event available to SwipeView and the direction is locked so while a vertical (iScroll) swipe is in progress, a change in the user's swipe-direction won't swipe to the next SwipeView page. Without those options, one can do a bizarre horizontal swipe.
sorry to pretty much reproduce the answer that's already been made - but I need to paste some code into a different space.
Alastair's example didn't quite work for me. The version of iScroll I downloaded didn't seem to support matching a class, it wanted an object. So since my project has jQuery already I used that to pass the active element in.
I added this to the end of the
carousel.onFlip()
function from the example at demo/inline/test.html in the download for http://cubiq.org/swipeviewHaven't done extended testing - this is just something I'm looking at a bit while comparing cominbation of libraries to use but it's working as you'd expect in Chrome using the code above.
EDIT Just tested in mobile safari on iphone too link here https://dl.dropbox.com/u/81328343/scroll/test.html
Only thing (not sure if it's good or bad, depends on use case) is that when returning to a slide it jumps back to the top.