Subtle Balanced Scroll Effect With jQuery - scroll-balanced

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.

How to use it:

1. Import jQuery library together with scroll-balanced.css and scroll-balanced.js into the document.

<link rel="stylesheet" href="css/scroll-balanced.css">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/scroll-balanced.js"></script>

2. Create the balance content following the html markup as these:

<div class="row-scroll-balanced" data-scroll-balanced>
  <div class="column-scroll-balanced scroll-balanced-left">

    <div class="scroll-balanced-item">
      Item 1
    </div>

    <div class="scroll-balanced-item">
      Item 2
    </div>

    <div class="scroll-balanced-item">
      Item 3
    </div>

  </div>

  <div class="column-scroll-balanced scroll-balanced-right">

    <div class="scroll-balanced-item">
      Sidebar Item 1
    </div>

    <div class="scroll-balanced-item">
      Sidebar Item 2
    </div>

  </div>
</div>

---

This awesome jQuery plugin is developed by thofik93. For more Advanced Usages, please check the demo page or visit the official website.