Disable Body/Content Scrolling With jQuery - disableScroll

File Size: 5.94 KB
Views Total: 7979
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Disable Body/Content Scrolling With jQuery - disableScroll

disableScroll is a very small jQuery plugin allows to temporarily disable the scrolling behaviors triggered by Mouse, Touch and Keypress events.

How to use it:

1. Include the jquery.disablescroll.js after jQuery library and the disableScroll plugin is ready for use.

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

2. The JavaScript to prevent scroll events when you scroll a scollable element as this:

var $nonScrollable = $("#myElement");
$nonScrollable.disablescroll();

3. If you want to re-enable the scroll events in the scrollable element:

$nonScrollable.disablescroll("undo");

4. Plugin's options to enable/disable the trigger events.

var $nonScrollable = $("#myElement");
$nonScrollable.disablescroll({
  handleWheel : true,
  handleScrollbar: true,
  handleKeys : true,
  // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
  // left: 37, up: 38, right: 39, down: 40
  scrollEventKeys : [32, 33, 34, 35, 36, 37, 38, 39, 40]
});

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