Detect Scroll Action And Direction With jQuery Scrolling Plugin
File Size: | 196 KB |
---|---|
Views Total: | 564 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A small yet useful jQuery plugin for detecting user scroll events that detects scroll actions (first, start, move, finish) and scroll directions (up/down) on a specific element.
How to use it:
1. To get started, insert the jQuery Scrolling plugin after jQuery.
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" crossorigin="anonymous"> </script> <script src="jquery-scrolling.min.js"></script>
2. Detect scroll events on an element you specify.
<div id="demo" data-scrolling='{"debug":true}'> Debug: </div>
$(function(){ $('#demo').scrolling(); });
3. Possible options which can be passed via JavaScript or HTML data
attribute:
<div id="demo" data-scrolling='{OPTION:VALUE}'> Debug: </div>
// or $(function(){ $('#demo').scrolling({ offsetStart : $(window).height()/2, // (number) offsetFinish : $('#colophon').height(), // (number) timer : null, // (number) scrolled : null, // (boolean) move : 0, // (number) delta : 10, // (number) first : null, // (boolean) current : 0, // (number) last : 0, // (number) debug : false // (boolean) }); });
This awesome jQuery plugin is developed by krescentmoon. For more Advanced Usages, please check the demo page or visit the official website.