Get new jQuery plugins just once a week

×

syncscroll

September 28, 2015

syncscroll | A script to scroll two or more areas simultaneously.

syncscroll is a lightweight script that allows you to scroll two or more areas simultaneously.

Created by asvd

Download

Example

syncscroll jQuery plugin

scroll together


syncscroll

Syncscroll is a micro library (946 bytes minified) written in vanilla javascript, which allows to scroll two or more scrollable areas simultaneously (online demo).

Usage

Download and unpack the distribution, or install it using Bower:

$ bower install syncscroll

Load the syncscroll.js in a preferable way (that is an UMD module):

<script src="path/to/syncscroll.js"></script>

Create the scrollable elements which you need to be synchroniously scrolled, add the syncscroll class for them, and set the name attribute to the same value:

<div class=syncscroll name=myElements>
    First big text goes here...
</div>

<div class=syncscroll name=myElements>
    Second big text goes there...
</div>

That's it! Now the elements will be scrolled simultaneously. Keep in mind that scrolling is synchronized proportionally, and not by amount of pixels.

If you update a set of synchronized elements by changing the classes or attributes, invoke syncscroll.reset() to update the listeners.

Have fun!

follow me on twitter: https://twitter.com/asvd0

syncscroll

Related posts:

Waypoints
Portamento
SlimScroll

To install using Bower
bower install syncscroll

syncscroll jQuery plugin

http://jquer.in/wp-content/uploads/2015/09/syncscroll.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever