Synchronize Scrolling Across Multiple Scrollable Elements - jQuery ScrollSync

ScrollSync is a jQuery plugin that makes it possible to synchronize horizontal and/or vertical scroll events across multiple scrollable elements (for example: iframes).

How to use it:

1. Link to jQuery JavaScript library and the ScrollSync plugin's script.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.scrollsync.js"></script>

2. Add you scrollable elements to containers.

<div class="container">
  <div class="content"></div>
</div>
<div class="container">
  <div class="content"></div>
</div>
<div class="container">
  <div class="content"></div>
</div>

3. Just call the function on the container element and done.

$('.container').scrollsync();

4. If you want to enable/disable horizontal & vertical scroll events.

$('.container').scrollsync({
  x_sync: true,
  y_sync: true
});

5. Decide whether to use ths SmartScroll functionality which allows to customize the scroll events.

$('.container').scrollsync({
  use_smartscroll: true,
  smartscroll_delay: 10, // in milliseconds
});

---

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