Sm00th-scroll NPM

Demo

👉 🚧 - coming soon

Installation

npm i sm00th-scroll

Usage

HTML

Just wrap all your page content within a section (or div, whatever) and give it sm00th-scroll-section.

<section sm00th-scroll-section>
  <div>Page content 🧈</div>
</section>

CSS

Add (or import) the base style your base CSS file.

index.css

JS

import { Sm00thScroll } from "sm00th-scroll";

const scroll = new Sm00thScroll();

Instance options

Option	Type	Default	Description
`target`	`HTMLElement`	Whatever container with `sm00th-scroll-section`	Scroll container
`disableOverflowBehaviorX`	`boolean`	`false`	Enables/disables body `overscroll-behavior-x` property
`disableOverflowBehaviorY`	`boolean`	`false`	Enables/disables body `overscroll-behavior-y` property
`disableTouchDetection`	`boolean`	`false`	Enables/disables the touch detection. Set it to `true` to allow smooth scrolling on touch devices
`ease`	`number`	`0.09`	Boosts/reduces smooth scrolling speed (must be between `0` and `1`)
`horizontal`	`boolean`	`false`	Enables/disables horizontal scrolling on the container

Attributes

Attribute	Value	Description
`sm00th-scroll-section`		Scroll container
`sm00th-scroll-ease`	`number`	Boosts/reduces smooth scrolling speed (must be between 0 and 1)
`sm00th-scroll-anchor`		Anchor that scrolls to a particular section in the same page
`sm00th-scroll-offset`	`number`	Offset added on a `sm00th-scroll-anchor`, useful when we jump to a section in the page and we want some space at the top

sm00th-scroll-ease

Instance methods

Method	Description	Arguments
`init()`	Initialize the scroll
`on(eventName, function)`	Listen to scroll events 👇
`refresh()`	Updates the `target` element and its height. Useful to call in SPA when a page transition is done and we need to update the scroll
`destroy()`	Destroys all the events (`scroll` for `vertical` mode and `wheel` for `horizontal` mode) and removes avery custom class/attribute scroll related
`scrollTo({options})`	Scrolls to a target	`element: HTMLElement` => `dom` node to scroll to `offset: number` => pretty straightforward`value: number` => amount of px to scroll

Instance events

Event	Description
`scroll`	If you log the instance here you will get it updated with the latest values you might need (for example `y` and `x` will contain the scroll progress/position)

Hints

If you need to retrieve the scroll progress

import { Sm00thScroll } from "sm00th-scroll";

const scroll = new Sm00thScroll();

scroll.on("scroll", () => {
  console.log("Vertical scroll position: ", scroll.y);

  console.log("Horizontal scroll position: ", scroll.x)
})

If you need to know when the user stops scrolling

import { Sm00thScroll } from "sm00th-scroll";

const scroll = new Sm00thScroll();

scroll.on("scroll", () => {
  const hasStopped = scroll.scrollRequest === 0;

  console.log(hasStopped);
})

Notes

🚧 Please note that this lib is still in WIP 🚧
Currently the lib doesn't support multiple scrolling sections in the same page, but this might change in the future 🤘.
In vertical mode, the scroll event is used, hence the scrollbar is present and you can navigate the page with the spacebar, top and bottom arrow
in horizontal mode, the wheel event is used, so you won't have the scrollbar. This might break a11y, but this might as well change in the future (either with a custom scrollbar, and then I will get rid of the scroll event and just use wheel for the vertical as well, or using the scroll event for the horizontal mode too). You can still navigate the page using both the arrows and the spacebar.