iScroll 4 Helper Code Snippets

I’ve been using the iScroll 4 plugin for a while now, it’s pretty nifty. I use it for getting touch friendly scrollbars happening – great plugin. If I get time I’ll code an extension API for it & code some demos if there is enough interest. But for now here is some code snippets.

//settings for snippets below
var scrollName = 'myScroll',
     scrollDuration = 1000,
    scrollAmount = 200;

Setup scroll with end scroll callback.

//setup scroll with end scroll callback
window[scrollName] = new iScroll(scrollName, {
    onScrollEnd: function() {
        console.log('onScrollEnd');
        //do something on end of scrolling
    }
});

Check scroll is at top of content.

//Check scroll is at top of content
window.scrollName.y < 0

Check scroll is at bottom of content.

//Check scroll is at bottom of content
window.scrollName.y == window.maxScrollY

Scroll to top of content.

//scroll to top of content
window.scrollName.scrollTo(scrollDuration);
//or
window.scrollName.scrollTo(0,0)

Relative scrolling up.

//relative scrolling up
window.scrollName.scrollTo(0,'-'+scrollAmount,scrollDuration,true);

Relative scrolling down.

//relative scrolling down
window.scrollName.scrollTo(0,scrollAmount,scrollDuration,true);

//initialise scroll on a bootstrap modal window if it doesn’t exist

if (!window[scrollName].wrapper) {
    //it needs to be visible for it to work...
    setTimeout(function()
    {
        console.log('modal iscroll...');
        console.log(scrollName);
        window[scrollName] = new iScroll(scrollName);
    }, 10);
}

Frequently Asked Questions (FAQs) about iScroll and Scrollend Event