Have ideas to improve npm?Join in the discussion! ¬Ľ

    scrolleventjs

    1.0.3¬†‚Äʬ†Public¬†‚Äʬ†Published

    What is scrollEvent.js?

    Simple and fast event listener for enter viewport in pure Java-Script.

    Key-features are:

    • Event actions for visible viewport
    • Works without any dependencies
    • Fast und small size in pure javascript
    • Multiple instances (and events) possible

    General use

    1. First download and add the library to the header:
    <script src="./local/path/to/scrollEvent.min.js"></script>

    With external hosted file:

    <script src="https://cdn.jsdelivr.net/npm/scrolleventjs@1.0.3/src/scrollEvent.min.js"></script>
    1. Now add ScrollEvent listener to an element:
    <script type="text/javascript">
      ScrollEvent().visible(DOMElement, () => {
       // Event that should happen when DOMElement is visible
      });
    </script> 

    Example and demo

    Pure Java Script (Vanilla JS)

    <script type="text/javascript">
      ScrollEvent().visible(document.getElementById('myElement'), (element) => {
       elment.innerHTML = 'I changed my text right now!'
      });
    </script> 

    See the javascript library live in action: Open Example

    It is also possible with javascript libraries like jQuery, React.js, AngularJS or vue.JS. Only have to switch element selector.

    Functions

    ScrollEvent().visible(DOMElement, Callback)
    Parameter Description
    DOMElement An HTML DOM element (as selector)
    Callback(element) A function (Event), called when element is visible. Object in method: element

    Options

    The options are optional and can be added as an object to the main ScrollEvent function:

    Option Description Datatype Default Value
    delay Delay time in ms, after event should fire Number 0
    repetition Amount of repetition of the event Number 1
    fullyInView Have the elemnt to be fully in view? Boolean false

    Example

    ScrollEvent({delay:2000,fullyInView:true}, () => { /* action .... */ });

    Install via npm

    You can simple install the javascript library locally via npm:

    npm install scrolleventjs

    Install

    npm i scrolleventjs

    DownloadsWeekly Downloads

    0

    Version

    1.0.3

    License

    ISC

    Unpacked Size

    50.8 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar