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/[email protected]/src/scrollEvent.min.js"></script>

2. 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