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
- 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"></script>- Now add ScrollEvent listener to an element:
<script type="text/javascript">
ScrollEvent().visible(DOMElement, () => {
// Event that should happen when DOMElement is visible
});
</script>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.
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 |
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 .... */ });You can simple install the javascript library locally via npm:
npm install scrolleventjs