javascript - How to use iScroll4 with SwipeView? - Stack Overflow

admin管理员组

文章数量:1419219

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'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?

• javascript
• mobile
• iscroll4
• swipeview

Share Improve this question Follow asked Feb 22, 2012 at 17:54 pruettpruett 2,12133 gold badges2222 silver badges3737 bronze badges 2

• can you provide some code? I have used a horizontal iScroll within a vertical iScroll and both directions work, so not sure about your issue. – alnafie Commented Feb 23, 2012 at 17:03
• How to automate swipeview - automatically swipe the images after a time period? – Ashwin G Commented Feb 5, 2013 at 9:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

Haven't done extended testing - this is just something I'm looking at a bit while paring inbation 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./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.

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.

本文标签： javascriptHow to use iScroll4 with SwipeViewStack Overflow