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
   
Detect Scroll Action And Direction With jQuery Scrolling Plugin

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.