Skip to navigation
2011 Nov 23

jScroll: An iScroll Plugin for jQuery

It’s often the case when making web apps that the tools for the job exist, they’re just hard to use. Never has this been more apparent for us as a group than it has been with iScroll. iScroll is standalone javascript library for enabling hardware accelerated scrolling on Webkit devices. It mainly targets iOS (iPhone, iPad), but will also work with Android devices. The problem with iScroll for us was that it will only attach itself to an element if that element has an ID. We’re not fond of using ID’s around here because it makes it harder to re-use code. To fix this, we created a jQuery plugin for iScroll that will allow it to be attached to any element in the wrapper set.

jScroll

jScroll works just like iScroll, except easier. Assuming you have some elements laid out like this:

<div class="wrapper">
  <div class="scroller">
      <p> Some very long content or real long list here....</p>
  </div>
</div>

To set up iScroll on the list, all you do is target it like so:

$(document).ready(function() {
	$(".wrapper").jScroll();
});

You can also pass any of the default options from iScroll into jScroll:

$(document).ready(function() {
	$(".wrapper").jScroll({
		lockDirection: false,
		fadeScrollbar : true
	});
});

Removing iScroll using jScroll is also easy:

$(document).ready(function() {
	$(".wrapper").jScroll({
		remove : true
	});
});

A full example, download link, and link to the jQuery plugin page are all below. If you have any questions, please leave a comment and we’ll do whatever we can to help you.

GitHub Repo & Download: https://github.com/vital101/jScroll

Designed and created by DDM Marketing & Communications.