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
[/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]