🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Scroll Balanced is a tiny jQuery plugin for balanced scroll content that slows the scroll speed of your short column (typically sidebar with dynamic height) to adapt the scroll speed of the long column.

scrolling

Documentation

scroll-balanced

jQuery plugin for balanced scroll content

Demo

How to use:

Install via NPM:

npm install scroll-balanced

Make sure to include jQuery in your page:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Include jQuery Scroll-Balanced:

<script src="js/scroll-balanced.js"></script>

Include jQuery Scroll-Balanced styles

<link rel="stylesheet" href="css/scroll-balanced.css">

All you must to do just create markup like below, and put your content left in element with class (scroll-balanced-left), and right in element with class (scroll-balanced-right)

<div class="row-scroll-balanced" data-scroll-balanced>   <div class="column-scroll-balanced scroll-balanced-left"> 	 		<div class="scroll-balanced-item"> 			<!--.put your content here--> 		</div>    </div>    <div class="column-scroll-balanced scroll-balanced-right">  	  <div class="scroll-balanced-item"> 			<!--.put your content here--> 	  </div>    </div> </div>

You May Also Like