Scroll Trigger
A simple Vue Directive to trigger a class based on the element inview or not.
Install
Install the package
npm install @sil/scroll-trigger
Import the package
import ScrollTrigger from '~/@sil/scroll-trigger
Define the component:
Vue.directive(ScrollTrigger);Use the component with default values:
<any-element v-scroll-trigger /> Use the component with alternative values:
<any-element v-scroll-trigger="{ elementClass: 'myTrigger', inActiveClass: 'myTrigger-inactive', activeClass: 'myTrigger-active' }" /> Settings
debug
Get logs and see whats happening in your console.
default: false
relative
The position is being calculated in a relative way. This means that the translated value is calculated in the position
of the element. When you want to make this work from the original (positioned) position of an element. Use relative: false
default: true
elementClass
The default class set on an element.
default: trigger
activeClass
The default class set on an element when active.
default: active
inActiveClass
The default class set on an element when inactive.
default: inactive
bemClass
When set, the element, active and inactiveclass are overruled. The bemClass is set as the main class with the following settings:
- elementClass:
[bemClass]__trigger - activeClass:
[bemClass]__trigger--active - inActiveClass:
[bemClass]__trigger--inactive
default: null
startInactive
The trigger is always started as inactive, also when it is inview. This can be changed to false.
default: true