JavaScript

Article

Draggable scrollbars using iScroll with touch support

By Sam Deering November 03, 2013

If your using iScroll (great plugin btw) for implementing scrollbars which touch support, just like the iDevices. It currently (iScroll4) doesn’t support draggable scrollbars. This is usually a must for most sites as users viewing on browers will try to drag the scrollbar… normal behavior of a window scrollbar.

Fortunately, this dude called Zoran has forked and coded the draggable scrollbars for iScroll. Good work son.

Include the plugin:

https://github.com/ZoranJambor/iscroll/blob/master/src/iscroll.js

Some more examples:

https://github.com/ZoranJambor/iscroll/tree/master/examples

Tweak the CSS to get a bigger scrollbar.

Before.

After.

Done.

Meet the author

Sam Deering

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

No Reader comments

Latest Courses

Browse all 16 courses

Diving into ES2015

Get ahead of the curve with ES2015

JavaScript: Next Steps

Take your skills to the next level in JavaScript

React The ES6 Way

Have ES5 down pat? Take your career to the next level with this ReactJS and ES6 course.

Premium Course

Darin Haener, Jun 09

Diving into ES2015

Premium Course

M. David Green, Apr 06

JavaScript: Next Steps

Premium Course

Darin Haener, Feb 15

React The ES6 Way

Latest Books

Browse all 15 books

ECMAScript 2015: A SitePoint Anthology

Dive into the next generation of JavaScript with this 155 page anthology!

Shaumik Daityari

Jump Start Git

Take control of your code

Full Stack JavaScript Development with MEAN

It’s clean, it’s lean—it’s the MEAN Stack

Premium Book

James Hibbard, Feb 28

ECMAScript 2015: A SitePoint Anthology

Premium Book

Shaumik Daityari, Aug 27

Jump Start Git

Premium Book

Colin Ihrig, Jan 03

Full Stack JavaScript Development with MEAN

Recommended

Quick Tip: Add or Remove a CSS Class with Vanilla JavaScript

Yaphi Berhanu, 13 hours ago

Yaphi Berhanu demonstrates two different methods for adding and removing a CSS class to DOM elements with vanilla JavaScript. No jQuery...

A Deep Dive into Routing with hapi

Andrew Van Slaars, 3 days ago

Take a deeper dive into hapi routes and learn how to use parameters to create flexible routes to use within your applications. See how...

JavaScript

Yaphi Berhanu, 13 hours ago

Quick Tip: Add or Remove a CSS Class with Vanilla JavaScript

Yaphi Berhanu demonstrates two different methods for adding and removing a CSS class to DOM elements with vanilla JavaScript. No jQuery required!

JavaScript

Andrew Van Slaars, 3 days ago

A Deep Dive into Routing with hapi

Take a deeper dive into hapi routes and learn how to use parameters to create flexible routes to use within your applications. See how hapi prioritizes the selection of a route, to...