jQuery Plugin To Disable Page Scrolling For Scollable Element - scrollLock
File Size: | 29.2 KB |
---|---|
Views Total: | 2357 |
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"> ... </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.