scrolleventjs

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