Required
Type:
FunctionReturns:
Objectwith some methods
Create a new scroll_interactions instance with some options:
import scroll_interactions from "scroll-interactions";
const observe_elements = scroll_interactions(options);It returns chainable methods.
Required
Type:
Object
Set scroll_interactions options.
Required
Type:
String
DOM element/s selector.
Type:
StringDefaults:
1
Position of the trigger relative to root top. Range 0..1, where 0 is top and 1 is bottom.
Type:
StringDefaults:
Undefined
Unobserve target elements:
"onLoad"after first page load."below"when they are below the trigger."intersect"as soon as they intersect the trigger."above"when they are above the trigger.
Type:
BooleanDefaults:
false
Add progress to observe() method. Track the percent of completion relative to the target top border.
Type:
NumberDefaults:
Undefined
Add throttle in millisecond to scroll event listener.
Note: Only works if options.progress: true.
Type:
StringDefaults:
Document Viewport
Set IntersectionObserver.root, the element used as viewport for checking visibility of the target.
Type:
BooleanDefault:
false
Show the trigger line for debugging.
The scroll_interactions function returns some chainable methods.
const observe_elements = scroll_interactions(options);
observe_elements
.init()
.observe()
// ...Required
Type:
FunctionReturns:
scroll_interactionsmethods
Start to observe elements.
Be sure to initialize it after all elements has been rendered with their correct size and position, otherwise it'll not work as intended (window.onLoad listener may be useful in this type of situations).
Type:
FunctionArgument:
results={direction, position, progress, entry}Returns:
scroll_interactionsmethods
Callback to handle element observation.
You've access to one argument, an object with those properties:
directionscroll direction ("up","down").positionelement position relative to the trigger ("below","intersect","above").progresspercent of completion relative to the target top border.entryoriginal IntersectionObserver entry.
Note: progress only works if only if options.progress: true.
Type:
FunctionArgument:
emptyCache=falseReturns:
scroll_interactionsmethods
Disconnect IntersectionObserver, stops watching all target elements.
If emptyCache: true scroll_interactions will not remember which targets has been previously unobserved, therefor if scroll_interactions is re-initialized all targets will be observed again.
Type:
FunctionArguments:
options={},emptyCache=falseReturns:
scroll_interactionsmethods
Re-initialize scroll_interactions.
The first argument is an object, you can pass the same initial options. The second argument is the same as disconnect() method.
If you use progress or if you use a custom root, you must update() scroll_interactions on window resize and orientation change events (to ensure targetHeight and triggerPosition are re-calculated correctly).