Scroll

Observe scroll progression and provides helpers for parallax, locking and sticky effects.

• Usage
• Events
• Scroll to
• Locker
• Parallax
• Sticky

Install

npm install @wide/scroll --save

Usage

Internally use uos library.

Initialize scroll observer:

import '@wide/scroll'

Events

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 600px

Scroll to

Internally 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 jump

You 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.

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.

Locker

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 itself

And 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')

Parallax

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 })

Sticky

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 (default 0)

Add programmaticaly sticky effect to element:

import sticky from '@wide/scroll/lib/sticky'

const el = document.querySelector('.something')
sticky(el, { offset: 20 })

Libraries

This package uses :

• uos
• jump.js
• body-scroll-lock
• rellax
• stickybits

Authors

• Aymeric Assier - github.com/myeti
• Julien Martins Da Costa - github.com/jdacosta

License

This project is licensed under the MIT License - see the licence file for details