scrolleventjs v1.0.3

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>

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)

Options

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

Example

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

Install via npm

You can simple install the javascript library locally via npm:

npm install scrolleventjs