jquery.scrollz

After a simple try on jQuery plugin authoring with jquery.slicebar I decided to go further during my holidays : I wrote a scrolling plugin.

What is it for ?

The plugin, named jquery.scrollz, adds modern scrolling features on any HTML content and works well with jQuery Mobile (it was my initial purpose).

To enable the plugin on HTML content just do :

jQuery(function($) { $('#content').scrollz(); });

Or even simplier with jQuery Mobile : just add data-scrollz=’simple’ tag to the element you want to make scrollable !

You can also invoke it with options as described in the documentation.

The plugin is hosted on github, right here.

Checkout live examples here or here (jQuery Mobile).

The features

Version 1.0.1 (already !) includes the following features :

• Scroll inertia
• Scrolling area bottom detection (for infinite scrolling)
• Pull header (for pull to refresh)
• Touch events emulation (to make a mouse behave like a finger on desktop browsers)
• Custom scroll thumb
• jQuery Mobile auto-enhancement attribute

Grunt is nice !

To write this plugin I decided to go with Grunt, THE command line build tool for Javascript projects (a bit like Ant for Java).

Grunt comes as a Node.js module that can be installed with (requires Node.js):

sudo npm install -g grunt

Then you can use the grunt command from the shell to create a project boilerplate or run the build script.

Grunt comes with a jQuery plugin project template. To generate a boilerplate from it use:

grunt init:jquery

After a few interactions (questions for project configuration) a project with src, libs, tests (with Qunit) and even a README.md for easy github push is created.

By default, the generated build file can : lint (check JS syntax), concat (concatenate source files) min (minify sources) and qunit (run tests).

5 minutes where enough for this project setup ! And Grunt helped me a lot for syntax checking.

On the road map

The first release of the plugin seems to be working OK (I tested it on Chrome, Safari and FireFox). But I already have plans for the future !

So if I have time, I would like to add the bounce support, for an even closer to native app experience.

I also would like to make the scroll thumb more customizable to allow creation of more original thumbs (such as Path little moving clock).

There are also some animations I would like to enhance. And I guess I can optimize the code for speed a bit as well…

Anyway, I hope you will enjoy this plugin.

Originally published at https://blog.grousset.fr on August 19, 2012.