Easy Momentum Scrolling Library For Vanilla JS & Svelte – Kinetic Scroll

Preview:

Description:

A tiny JavaScript library that allows you to implement fluid, momentum scrolling effects for scrollable containers (typically a long list). Supports both mousehweel events and touch gestures.

Feel free to download and use it in your next web project to create smooth and natural scrolling experiences that mimic the feel of touch devices and make your web content more accessible and enjoyable.

See Also:

• 10 Best Momentum Scrolling Libraries In JavaScript

How to use it (Vanilla JS):

1. Import the Kinetic Scroll.

import { kineticscroll } from './kineticscroll.js';

2. Initialize the kineticscroll on your long list as follows:

<!-- OPTIONAL Scoll Indicator -->
<div id="indic"></div>
<!-- Your Long List Here -->
<ul>
  ...
</ul>

let list = document.querySelector('ul');
kineticscroll(list, { 
  indicator: 'indic',
});

/* style the scroll indicator in your CSS */
#indic {
  position: absolute;
  left: 1px;
  width: 6px;
  height: 20px;
  background-color: #ff3e00;
  z-index: 1;
}

3. Determine whether to snap to the item when the scrolling ends. Default: false.

let list = document.querySelector('ul');
kineticscroll(list, { 
  indicator: 'indic',
  snap: true,
});

4. Determine whether to allow mouse wheel events in the scrollable area. Default: true.

let list = document.querySelector('ul');
kineticscroll(list, { 
  indicator: 'indic',
  useWheel: true,
});

Changelog:

04/05/2023

• Handle clicks in the container’s underlying elements