GripScroll.js

A decoupled scrollbar with end-grips, zooming, and an event API for custom coupling with your target element.

Fork me on GitHub

Overview

GripScroll works by injecting scrollbar(s) into your target container element, and then triggering update events whenever the user interacts with the scrollbar(s).

Usage

Include keymaster.js (the only dependency, see keymaster) and then GripScroll.js. Available on bower as keymaster and gripscroll.


<script src="path/to/keymaster.js"></script>
<script src="path/to/GripScroll.js"></script>
      

Setup a target container:


<div id="target-container">
  ...
</div>
      

Add GripScroll to your target container:


var target = document.querySelector("#target-container");
GripScroll.add( target );
      

Update your target whenever the user interacts with the scrollbar(s) by listening to the gripscroll-update event:


target.addEventListener('gripscroll-update', function(e){
  // Your update code here...
});
      

The gripscroll-update event has the following parameters:

You can also listen to individual scrollbars:


target.addEventListener('gripscroll-update-x', function(e){
  // Your horizontal update code here...
});

target.addEventListener('gripscroll-update-y', function(e){
  // Your vertical update code here...
});
      

Individual scrollbar events have the following parameters:

Contribute

Contributions are welcome!

This is part of my ongoing effort to build browser-based music production software. Check me out at http://www.ansonkao.com/ + more to come.

Copyright © 2014 Anson Kao (MIT Licensed).