So, you like iScroll so much that now you want to be a pro at it? Well, your wish is our command.
Here, we will provide you with all the information that you ever need to master the iScroll.
The best way to learn and explore iScroll is by checking out the demos available on the web. You can find a lot of examples along with script features.
For starters, iScroll is a class that needs to be defined for each scrolling area. As a matter of fact, there are no restrictions to the number of iScrolls that you can have on your page, unless there is no limit specified by your device CPU and memory.
Although iScroll uses the hardware compositing layer, there are limitations in terms of the elements that your hardware can handle.
Ideally, the HTML structure looks something like this:
<div id = “wrapper”>
<ul>
<li>….</li>
<li>….</li>
</ul>
</div>
So, you need to apply the iScroll to the wrapper of the scrolling area. In the example above, iScroll will make the UL element scroll. It is important to mention here that iScroll will only enable the first child of the container element to scroll. The other children will simply be ignored.
To initiate the script, here is the minimal call:
<script type="text/javascript">
var myScroll = new IScroll('#wrapper');
</script>
You can pass a string representing the DON selector of the scroll container element as the first parameter. You can also pass it as a reference to the element itself. Here is a valid syntax for this scenario:
var wrapper = document.getElementById('wrapper');
var myScroll = new IScroll(wrapper);
This emans that you can pass the element directly or pass the string through querySelector. Here is the syntax to follow select a wrapper by its class name instead of its id:
var myScroll = new IScroll('.wrapper');
It is important to mention here that iScroll makes use of querySelector over querySelectorAll. This means that only the first occurrence of the selector is used.
It is important to mention here that iScroll needs to be initiated once the DOM is ready. The best bet here is to trigger it on window onload event. You can also trigger it using inline initialization or DOMContentLoaded but keep in mind that the script needs to have the values of width and height of the scrolling area. In an event when you use images with no explicit height and width declaration, chances are high that iScroll will end up with a scroller of a wrong size.
Here is an example iScroll configuration:
<head>
...
<script type="text/javascript" src="iscroll.js"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new IScroll('#wrapper');
}
</script>
</head>
...
<body onload="loaded()">
<div id="wrapper">
<ul>
<li>...</li>
<li>...</li>
...
</ul>
</div>
</body>
You can configure the iScroll by passing a second parameter while initializing. Here is an example that turns on mouse wheel support and scrollbars:
var myScroll = new IScroll('#wrapper', {
mouseWheel: true,
scrollbars: true
});
Once done, you can access the normalized values from the options object.
So, this pretty much explains the basic working of iScroll. To make the most out of it, we recommend checking out its various features to understand what you can do with it and make boring scrolling all the more fun for your users. You can define the behaviour of your scroller in terms of click, momentum, mouse wheel, and more.
If you are stuck anywhere or need any support, feel free to contact us, and we will help you out. Rest assured, using iScroll is way simpler and fun.