iScroll 4 Helper Code Snippets

Sam Deering

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() {
        //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


Relative scrolling up.

//relative scrolling up

Relative scrolling down.

//relative scrolling down

//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...
        console.log('modal iscroll...');
        window[scrollName] = new iScroll(scrollName);
    }, 10);

Get your free chapter of Level Up Your Web Apps with Go

Get a free chapter of Level Up Your Web Apps with Go, plus updates and exclusive offers from SitePoint.