Iscroll inside Iscroll

[jnurse13]

Situation I have a one main div holding a series of small divs, (think widgets on a dash board). Some of the small divs need Iscroll to scroll the information. The large div or page also has Iscroll. When I scroll using touch or mouse wheel over a small div the, it scroll but the scroll is passed through to large div behind, so both scroll. How can I stop this?

[garciaalvaro]

I made a jsFiddle that displays the scrollEnd and scrollStart of nested iscrolls. http://jsfiddle.net/z8TKL/

[cubiq]

at the moment iscroll is not really done for nesting :) I'll work on it for future releases

[mellinger]

Putting e.stopPropagation(); somewhere near line 354, inside the start function, seems to do the trick for me :)

[pnchen]

Hope the mouse event been passed as a parameter during the scroll notification(like iscroll4 onScrollStart...), so that I can control the event propagation myself.

[cubiq]

@pnchen click can be fired with click:true option

[jtwee]

I did this in a rather hacky way by enabling/disabling the parent scroller on touchstart/touchend of the inner. To do so I had to have globally accessible iscroll instance variables (an array called pageScrollers in my case), but I needed those for other things anyway. YMMV.

$('.iScroller .inline-scroller').on({
    touchstart: function() {
        if (pageScrollers[currentPageID]) {
            pageScrollers[currentPageID].disable();
        }
    },
    touchend: function() {
        if (pageScrollers[currentPageID]) {
            pageScrollers[currentPageID].enable();
        }
    }
});

[jhnns]

Seems like nesting iScroll is very common :wink:

[johannesjo]

This is working now, isn't it? At least for 2 elements if you have one for the vertical axis and one for the horizontal axis. Imho everything else doesn't make much sense anyway.

[jasokant]

@breams I adapted your workaround a little, adding mouseup and mousedown events like so...works great for my needs:

$('.iScroller .inline-scroller').on({
    touchstart: function() {
        if (pageScrollers[currentPageID]) {
            pageScrollers[currentPageID].disable();
        }
    },
    mousedown: function() {
        if (pageScrollers[currentPageID]) {
            pageScrollers[currentPageID].disable();
        }
    },
    touchend: function() {
        if (pageScrollers[currentPageID]) {
            pageScrollers[currentPageID].enable();
        }
    },
    mouseup: function() {
        if (pageScrollers[currentPageID]) {
            pageScrollers[currentPageID].disable();
        }
    }
});

[krnlde]

Any news on this?

[Linrstudio]

mark

[nickizzle]

It would be incredibly useful to get this fixed. breams solution works OK to prevent the parent scrolling while scrolling a child scroller, but it would be nice if once you get to the top of a child scroller, the parent automatically starts scrolling up again (likewise with the bottom)

[fgilio]

Thanks @jasokant, it worked great! It would be really nice to have this fixed, with the functionality @nickizzle mentioned

[nickizzle]

This is the solution I came up with in the end. @fgilio you may find this useful. In this example, innerScroll and outerScroll are both iScrolls. innerScroll is inside outerScroll:

innerScroll.on('scrollStart', function() {
    if ((this.y < 0 && this.directionY == -1) || (this.y > this.maxScrollY) && this.directionY == 1) {
        outerScroll.disable();
    }
});
innerScroll['js-terms-scroll'].on('scrollEnd', function() {
    outerScroll.enable();
});

[fgilio]

Thanks @nickizzle, that's pretty useful!!

[sandor]

Hey Guys,

how could be this fiddle be achieved with iScroll5?

http://jsfiddle.net/khaledalyawad/4p7t8ymp/

I am having problems to implement the solution of @nickizzle

THX!

[ganya-qwe]

@nickizzle i don't know how you become this code working for iscroll. Iscroll doesn't use native scroll, it change position of content inside parent container via transform. I can realize only @breams code