iScroll page currently scrolling to detection

Question

I use the following iScroll 5 code (generally, not so important: just a common scrolling page-by-page ):

        var myScroll = new IScroll('.scroller', {
            mouseWheel: true,
            scrollbars: true,
            keyBindings: {
                // doesn't matter
            },
            preventDefault: false,
            fadeScrollbars: true,
            snap: 'section', // <-- that's the key
            wheelAction: 'scroll',
        });

        myScroll.on('beforeScrollStart', function (e) {
            myScroll.preventDisabling = true;
        });

        myScroll.on('scrollMove', function (e) {

        });
        myScroll.on('scrollStart', function (e) {

            // !!! I need the detection somewhere here !!!

            if (!myScroll.preventDisabling) {
                myScroll.disable();

                disabledWasCalledInMeanwhile = true;
            }

            myScroll.preventDisabling = false;
        });

        var disabledWasCalledInMeanwhile = false;
        // that's just to prevent jumping to another page before scrolling is finished
        myScroll.on('scrollEnd', function (e) {

            disabledWasCalledInMeanwhile = false;
            window.setTimeout(function () {
                if (!disabledWasCalledInMeanwhile)
                    myScroll.enable();

            }, 250);


            $('.labels>*').toggleClass('active', false)
                .eq(this.currentPage.pageY).toggleClass('active', true);

        });
        myScroll.on('scrollCancel', function (e) {

            myScroll.enable();
        });

So, is there any chance to detect in beforeScrollStart or scrollStart the page I am going to scroll to ? That's important to know for triggering that page items animation. Thanks!

Answer 1

I've used iScroll for a number of years (it is a excellent library), and I don't know of a built-in method of doing it. All the scroll events (except scrollEnd) before the iScroll snap is determined. However, with a slight modification of the library, I believe it is possible.

First, go into iScroll.js source and find the _nearestSnap method. At the bottom of the method, you will find the object you seek returned. Before the return, grab that data and pass it to a custom event. Unfortunately, iScroll's event system doesn't permit you to pass custom variables to events, so you'll have to do a work-around. In addition, you'll need to track the "flick" event because it won't trigger the _nearestSnap method.

iScroll modification in _nearestSnap method

this.customSnap({
    x: x,
    y: y,
    pageX: i,
    pageY: m
});

Update to class instance. Note the addition of "customSnap" method and the flick event.

myScroll = new IScroll('#wrapper', {snap: "p"});
myScroll.customSnap = function(data) {
    console.log(data);
};

myScroll.on('flick', function() {
    console.log(data.currentPage);
});

That should do it. Not necessarily the cleanest update, but in my testing, it does work.

http://jsfiddle.net/9pa4th4y/