@mangoweb/in-view
v0.0.9
Published
Watches elements entering and leaving viewport.
Downloads
13
Keywords
Readme
InView
The manGoweb InView component. Watches elements entering and leaving viewport.
Installation
npm install @mangoweb/in-view @mangoweb/scripts-base
This is a @mangoweb/scripts-base
component.
Usage
In your template:
<script>
window.initComponents = (window.initComponents || []).push({
name: 'InView',
place: '#targetWrapper', // Element you want to watch or a wrapper
data: { // Optional
targets: '.target', // Watched children
threshold: 0, // Area of a target required to be inside viewport
isAboveViewClass: 'isAboveView', // Class added to a target element when seen above viewport
isInViewClass: 'isInView', // Target seen in viewport
isBelowViewClass: 'isBelowView', // Target seen below viewport
isSeenClass: 'isSeen', // Target seen in viewport at least once
}
})
</script>
IE support / older Safari (caniuse)
Use IntersectionObserver
polyfill, e.g., <script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>