jQuery Plugin To Disable Page Scrolling For Scollable Element - scrollLock

jQuery Plugin To Disable Page Scrolling For Scollable Element - scrollLock
File Size: 29.2 KB
Views Total: 2302
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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:

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">
.example {
  height: 200px;
  overflow: auto;

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


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


  // 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

// disable the plugin

// destroy the plugin

// toggle the Strict option

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:



  • v3.1.2: JS update


  • v3.0.0: JS update


  • v2.2.0: JS update


  • 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.