How to use iScroll4 with SwipeView?

Question

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?

Answer 1

I've found the documentation to be terribly lacking as well but something like this works for me:

function swipeView(wrapper){
        wrapper = new SwipeView('#wrapper', {
        numberOfPages: pages.length
    });

    wrapper.onFlip(function(){
        scroller = new iScroll('.swipeview-active', {
            hScroll: false,
            lockDirection: true
        });
    });
}

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.

Answer 2

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.

scroller = new iScroll($('.swipeview-active')[0], {
  hScroll: false,
  lockDirection: true,
  hideScrollbar: true,
  fadeScrollbar: true
});

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/swipeview

Haven'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.