Prevent Parent Scroll When Scrolling A Child Element - jQuery ScrollStop

ScrollStop is a jQuery plugin that has the ability to prevent Body from scrolling when you reach the bottom of a scrollable child element by mouse wheel.

How to use it:

1. Place both jQuery library and the jQuery ScrollStop plugin' script at the bottom of the html page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="scrollstop.js"></script>

2. Just call the scrollstop() function on the target scrollable area and the plugin will take care of the rest.

<div class="box" id="box">
  <img src="https://unsplash.it/350/400/?random" />
</div>

.box {
  width: 400px;
  height: 250px;
  overflow-y: scroll;
}

$('#box').scrollstop();

Change log:

2016-11-28

• fixed for firefox

---

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