Smooth Scrolling In Pure Javascript For The Web | iscroll

iScroll is a high-performance, dependency-free, cross-platform JavaScript scroller.

Works on desktop, mobile and smart TV. It has been aggressively optimized for performance and size to deliver the best result on both modern and old devices.

iScroll is all about optimization. To reach the highest performance it has been divided into multiple versions. You can choose the version that best suits your needs.

Currently, we have the following fragrances:

  • iscroll.js┬áis a general-purpose script. It includes the most frequently used features and delivers very high performance in a small space.
  • iscroll-lite.js, it’s an abstract version of the main body. It does not support snap, scroll bars, mouse wheels, or key bindings. But if all you need is swiping (especially on mobile) iScroll lite is the smallest and fastest solution.
  • iscroll-probe.js, investigating the current scroll position is a tedious task, which is why I decided to create a custom version for it. If you ever need to know where to scroll, this is the iScroll for you. (I’m running more tests, this might end up in the plaintext iscroll.js, so keep an eye on that).
  • iscroll-zoom.js, adds zoom to standard scrolling.
  • iscroll-infinite.js, it can do infinite scroll and cache. Dealing with very long lists of items is not an easy task for mobile devices. iScroll infinite uses a caching mechanism that allows you to scroll an infinite number of items.

How to make use of it:

1. Load iscroll.js file in html document.

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

2. Create the html for the image carousel by 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>

3. CSS for image carousel design.

#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();
}
#dotty {
position: absolute;
width: 20px;
height: 20px;
border-radius: 10px;
background: #777;
}

4. Javascript to initialize the image carousel.

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);

iScroll smooth scrolling for the web Plugin/Github, javascript smooth scroll to element, javascript smooth scroll to anchor, smooth scroll – vanilla js


See Demo And Download

Official Website(cubiq): Click Here

This superior jQuery/javascript plugin is developed by cubiq. For extra Advanced usage, please go to the official website.

Share