JavaScript

iScroll 4 Helper Code Snippets

Sam Deering
Share

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 [/js] Check scroll is at bottom of content. [js] //Check scroll is at bottom of content window.scrollName.y == window.maxScrollY [/js] Scroll to top of content. [js] //scroll to top of content window.scrollName.scrollTo(scrollDuration); //or window.scrollName.scrollTo(0,0) [/js] Relative scrolling up. [js] //relative scrolling up window.scrollName.scrollTo(0,'-'+scrollAmount,scrollDuration,true); [/js] Relative scrolling down. [js] //relative scrolling down window.scrollName.scrollTo(0,scrollAmount,scrollDuration,true); [/js] //initialise scroll on a bootstrap modal window if it doesn't exist [js] 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); } [/js]