Observe scroll progression and provides helpers for parallax, locking and sticky effects.
npm install @wide/scroll --save
Internally use uos library.
Initialize scroll observer:
import '@wide/scroll'3 events scroll, scroll.up or scroll.down will be triggerd on each scroll step:
import emitter from '@wide/emitter'
emitter.on('scroll', e => {
e.value // progress in px
e.progress // progress in %
e.up // scrolling up
e.down // scrolling down
})
emitter.on('scroll.up', e => {
e.value // progress in px
e.progress // progress in %
})
// or without emitter
document.onEvent('scroll.up', e => {})Listen a specific range progression:
import { range } from '@wide/scroll'
range(300, 600, val => console.log(val)) // progress between 300px and 600pxInternally use jump.js library.
Listen jump link [data-scrollto] elements:
<div data-scrollto="#top">content</div>Jump programmaticaly to an element:
import { scrollTo } from '@wide/scroll'
scrollTo('.something')You can define global config applying to all links:
import { JUMP_CONFIG } from '@wide/scroll'
JUMP_CONFIG.offset = -20 // top offset for all jumpYou can aslo define config locally by adding HTML attributes:
<button
data-scrollto="#footer"
data-scrollto.duration="1010"
data-scrollto.offset="0"
data-scrollto.a11y="false"
data-scrollto.callback="scrollToCallback"
data-scrollto.easing="scrollToEasing"
>
Scroll to footer
</button>window.scrollToCallback = () => {
// Do some stuffs when scroll has been completed
}
window.scrollToEasing = () => {
// My custom easing animation code
}Note: Those parameters will override default (global) parameters.
| Name | Type | Description | Default value |
|---|---|---|---|
duration |
number |
Pass the time the scrollto() takes, in milliseconds. |
800 |
offset |
number |
Offset a scrollto(), only if to an element, by a number of pixels. |
-80 |
a11y |
boolean |
If enabled, and scrolling to an element: add a tabindex to, and focus the element | true |
callback |
function |
Pass a function that will be called after the scrollto() has been completed. |
null |
easing |
function |
Easing function used to transition the scrollto(). |
null |
More informations on Jump.js documentation.
Internally use body-scroll-lock library.
Lock page scroll, usefull when using a modal:
import { lock } from '@wide/scroll/lib/locker'
lock(el) // pass an element to NOT lock, like the modal itselfAnd then unlock it:
import { unlock } from '@wide/scroll/lib/locker'
unlock()These methods can be called through the event dispatcher:
import '@wide/scroll/lib/locker'
import { emit } from '@wide/emitter'
emit('scroll.lock', el)
emit('scroll.unlock')Internally use rellax library.
Add parallax effect to [data-parallax] elements:
import '@wide/scroll/lib/parallax'<div data-parallax>content</div>Or for an horizontal effect:
<div data-parallax.x>content</div>The moving speed can be customized (from -10 to 10):
<div data-parallax="4">content</div>Add programmaticaly parallax effect to an element (see rellax docs for all params):
import parallax from '@wide/scroll/lib/parallax'
const el = document.querySelector('.something')
parallax(el, { speed: .4 })Internally use stickybits library.
Add sticky behavior to [data-sticky] elements:
import '@wide/scroll/lib/sticky'<div data-sticky>content</div>The offset can be customized:
[data-parallax.offset="20"]to set top offset (default0)
Add programmaticaly sticky effect to element:
import sticky from '@wide/scroll/lib/sticky'
const el = document.querySelector('.something')
sticky(el, { offset: 20 })This package uses :
- Aymeric Assier - github.com/myeti
- Julien Martins Da Costa - github.com/jdacosta
This project is licensed under the MIT License - see the licence file for details