jQuery Plugin To Disable Page Scrolling For Scollable Element - scrollLock

scrollLock is a jQuery plugin that disables document body from mouse wheel scrolling when you reach the bottom / top of a specified scrollable element.

See also:

• Prevent Parent Scroll When Scrolling A Child Element - jQuery ScrollStop

How to use it:

1. Load jQuery JavaScript library and the jQuery scrollLock plugin at the end of the document.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="jquery-scrollLock.js"></script>

2. Create a scrollable container on the webpage.

<div class="example">
...
</div>

.example {
  height: 200px;
  overflow: auto;
}

3. Call the function on this container element to active the plugin.

$('.example').scrollLock()

4. Default plugin options. Note that you can also pass the options via data-* attribute as in data-strict="true"

$('.example').scrollLock({

  // An object defining CSS class(es) to be applied when top or bottom edge is locked. 
  animation: false,

  //  When provided, matching elements will be locked.
  selector: false,

  //  When enabled, only elements having a vertical scrollbar will be locked.
  strict: false,

  // Indicates if an element's lock is enabled on touch screens.
  touch: auto,

  // When enabled, keys that causes scrolling will also be locked.
  keyboard: false,

  // When provided, matching descendants scrolling will be unblocked. 
  // Useful when having a scrollable element inside a locked one.
  unblock: false,

  // This function is responsible for deciding if the element should be locked or not.
  strictFn: function(){}
  
})

5. Public methods.

// enable the plugin
$('.example').scrollLock('enable')

// disable the plugin
$('.example').scrollLock('disable')

// destroy the plugin
$('.example').scrollLock('destroy')

// toggle the Strict option
$('.example').scrollLock('toggleStrict')

6. Events.

// fires immediately when the top edge scroll is locked.
$('.example').on('top.scrollLock', function (evt) {
  // do something
})

// fires immediately when the bottom edge scroll is locked.
$('.example').on('bottom.scrollLock', function (evt) {
  // do something
})

Change log:

2017-06-17

• v3.1.3: JS update

2017-03-12

• v3.1.2: JS update

2016-12-06

• v3.0.0: JS update

2016-02-10

• v2.2.0: JS update

2016-02-04

• v2.1.0: added more options

---

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