Manages and lerps scroll position

Usage no npm install needed!

<script type="module">
  import okibaScrollManager from 'https://cdn.skypack.dev/@okiba/scroll-manager';


Okiba / ScrollManager

A class that extends EventEmitter (@okiba/event-emitter). Basically emits scroll events in two different ways, when enabled it lerp the scroll position and emits scroll events on request animation frame, when disable is like a proxy of native scroll events.

import ScrollManager from '@okiba/scroll-manager'
import {hasTouch} from '@okiba/detect'

// Enable lerped scroll if device is not touch
hasTouch ? ScrollManager.disable() : ScrollManager.enable()
// Listen scroll events
ScrollManager.on('scroll', ({y, delta, acceleration, progress}) => console.log(y, delta, acceleration, progress))


npm i --save @okiba/scroll-manager

Or import it directly in the browser

<script type="module" src="https://unpkg.com/@okiba/scroll-manager/index.js"></script>


import ScrollManager from '@okiba/scroll-manager'

Untranspiled code 🛑

Okiba UI packages are not transpiled, so don't forget to transpile them with your favourite bundler. For example, using Babel with Webpack, you should prevent imports from okiba to be excluded from transpilation, like follows:

  test: /\.js$/,
  exclude: /node_modules\/(?!(@okiba)\/).*/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']


Disable lerped scroll calculation and remove the raf listener


Enable lerped scroll calculation and add the raf listener


Calculate the lerped scroll position and emit a scroll event. The emitted scroll event pass an Object like:

 y // Lerped Y
 delta // Difference between actual y and the last emitted y
 acceleration // The accelleration of the scroll
 progress // The global progress of the page


Callback of scroll event and update the target Y. If component is disable it emits a scroll event


Adds event listeners


Removes event listeners


Update the scroll based on the page scroll and trigger a scroll event