Multi-purpose Javascript Smooth Scroller – iscroll

Category: Animation , Javascript , Recommended | January 3, 2017
0 Comment
Demo Download
Author:cubiq
Views Total:1,102 views
Official Page:Go to website
Last Update:January 3, 2017
License:MIT

Preview:

Multi-purpose Javascript Smooth Scroller – iscroll

Description:

iscroll is a powerful, mobile touch-friendly javascript smooth scroller library for multiple purposes.

With iscroll, you can scroll any html elements vertically or horizontally with smooth effects on any devices like mobile, desktop, tablet, and much more. More examples can be found in the demos folder.

Basic Usage (create an image carousel):

Load the iscroll.js in the html document.

<script type="text/javascript" src="iscroll.js"></script>

Create the html for an image carousel following the html structure like this:

<body onload="loaded()">
<div id="viewport">
<div id="wrapper">
<div id="scroller">
<div class="slide">
<div class="painting giotto"></div>
</div>
<div class="slide">
<div class="painting leonardo"></div>
</div>
<div class="slide">
<div class="painting gaugin"></div>
</div>
<div class="slide">
<div class="painting warhol"></div>
</div>
</div>
</div>
</div>
<div id="indicator">
<div id="dotty"></div>
</div>
</body>

The CSS to style the image carousel.

#viewport {
position: relative;
width: 320px;
height: 240px;
margin: 0 auto;
background: #444;
overflow: hidden;
}
#wrapper {
width: 200px;
height: 240px;
margin: 0 auto;
}
#scroller {
position: absolute;
z-index: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 800px;
height: 240px;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
background-color: #444;
}
.slide {
width: 200px;
height: 240px;
float: left;
}
.painting {
width: 140px;
height: 200px;
border-radius: 10px;
margin: 20px auto;
border: 1px solid #000;
box-shadow: inset 2px 2px 6px rgba(255,255,255,0.6),  inset -2px -2px 6px rgba(0,0,0,0.6),  0 1px 8px rgba(0,0,0,0.8);
}
.giotto {
background: url(giotto.jpg);
}
.leonardo {
background: url(leonardo.jpg);
}
.gaugin {
background: url(gaugin.jpg);
}
.warhol {
background: url(warhol.jpg);
}
#indicator {
position: relative;
width: 110px;
height: 20px;
margin: 10px auto;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUBAMAAABohZD3AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUGCDYztyDUJgAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAGFBMVEUAAADNzc3Nzc3Nzc3Nzc3Nzc3Nzc3///8aWwwLAAAABnRSTlMAX5Ks3/nRD0HIAAAAAWJLR0QHFmGI6wAAAFtJREFUGFdjYGBgEHYNMWRAAJE0IHCEc5nSwEABxleD8JOgXMY0KBCA8FlgfAcIXwzGT4TwzWD8ZAjfDcZPgfDDYPxU7Hx09ejmoduH7h5096L7B8O/6OGBGl4APYg8TQ0XAScAAAAASUVORK5CYII=);
}
#dotty {
position: absolute;
width: 20px;
height: 20px;
border-radius: 10px;
background: #777;
}

The javascript to initialize the image carousel.

<script type="text/javascript">
var myScroll;
function loaded () {
myScroll = new IScroll('#wrapper', {
scrollX: true,
scrollY: false,
momentum: false,
snap: true,
snapSpeed: 400,
keyBindings: true,
indicators: {
el: document.getElementById('indicator'),
resize: false
}
});
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
</script>

Changelog:

01/03/2017

  • Bugfix

See Also:

You Might Be Interested In:

Leave a Reply