scrollscout
Observe when elements enter or leave viewport. Create custom scroll triggers, fixed or relative to element and viewport height. Suitable for responsive/fluid or static layouts.
Install
npm install scrollscout
Setup
With ES6
Without
var scrollscout =
Usage
If all you need is a quick way to detect when an element enters or leaves the viewport, see Scrollscout built in events. Or add your own custom triggers to specify position, offset, direction, and axis.
Custom triggers
var myScrollscout = scrollscout var tg = myScrollscout tgtg tg
A more convenient way would be to use method chaining
myScrollscout axis'x'
The order doesn't matter. But note that 'subscribe' must be the last in chain.
Simplest usage
myScrollscout
Position
A trigger consist of two pins. One is relative to the view (viewport) and the other to the scene (target element). Both pins are added via the view
and scene
methods, that each takes a position ratio and an offset value. By default the pins are placed in the center at a 0.5 ratio of the view/scene height or width. The position ratio is relative to the subject height or width. So a ratio 0 would be the top (or left side) of the view or scene. A ratio of 1 would be the bottom (or right side).
// Here the view pin is placed 1/5 from the top of the// viewport with an offset of 100pxtr // Here the scene pin is placed 1/10 from the bottom of the scene elementtr
The second argument could also be a number
tr
Example:
trAtrA +---------+ +------------+ | | | | | | trA | <--- trA | | | | +------------+ | | +---------+ | trA <--- trA | | //"offset by 10 pixels" +---------+ | | +---------+
Direction
This controls from what direction the scene should pass in order to trigger an event.
tr // down or right
tr // up or left
Axis
The axis can be set with 'x'
or 'y'
traxis'x'
Unsubscribing
The subscribe method returns a function that can be used to unsubscribe.
var unsubscribeTrigger = tr // ...then later
var unsubscribeTrigger = tr
Or you can unsubscribe from the trigger itself
tr
Destroy
Remove trigger and unsubscribe
tr
Debug
To help visualize what's going on use debug
trtr // custom colortr // remove debug marker. Can be toggled with true/false.
Debug all triggers with
myScrollscout
Create a scrollscout
To create a scrollscout use scrollscout.create
and add the scene element. Window is the default view.
var myWindowScrollscout = scrollscout
var myWindowScrollscout = scrollscout
You can also supply an html element as the view
var myElementScrollscout = scrollscout
Options are:
var options = runInitialUpdate: true // Default is true autoUpdate: true // Default is true throttleResize: 100 // Milliseconds. Default is null throttleScroll: 10 // Milliseconds. Default is null
Add trigger
When adding a trigger a name must be specified
myScrollscout
Remove trigger
myScrollscout
Get trigger
myScrollscout
Start/Update/Stop
Activate and deactivate with start
and stop
myScrollscoutstart
myScrollscout
To force or do manual updates use update
.
// Force updatemyScrollscout
// For manual update set autoUpdate to falsevar myScrollscout = scrollscoutmyScrollscout
Scrollscout built in events
Use the built in methods if you just need to detect if an element enters or leaves the viewport. They are sceneWillEnter
, sceneWillLeave
, sceneDidEnter
, sceneDidLeave
. Options are offsetTop
and offsetBottom
.
var myScrollscout = scrollscout myScrollscout