TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

Adaptive Scroll

npm version downloads gzip size


Adaptive Scroll is designed to enhance the standard scrolling experience by providing smooth, linearly interpolated scrolling.

It uses an adaptive design strategy, primarily focusing on enhancing the user experience, while keeping performance considerations in mind.

Note: Adaptive Scroll is based on the wheel event, making it an enhancement specifically tailored for non-touch devices. This ensures that the native scrolling behavior on mobile devices, which is already optimized for touch interaction, remains unaffected.


By default, Adaptive Scroll can be installed using npm:

npm install adaptive-scroll

For a React project, you can install react-adaptive-scroll:

npm install react-adaptive-scroll


Adaptive Scroll is a function that is initiated when called. It returns a cleanup function, which can be called to manually stop the scrolling operation:

import adaptiveScroll from "adaptive-scroll";

const cleanup = adaptiveScroll();

// Cleanup manually when needed

In a React application, you can use the AdaptiveScroll component from react-adaptive-scroll. The lifecycle of the scrolling operation is managed within this component, initiating on mount and automatically cleaning up on unmount, making it ideal for applying the enhanced scrolling behavior only to specific pages.

import AdaptiveScroll from "react-adaptive-scroll";

function App() {
  return (
      <AdaptiveScroll />
      {/* Rest of the application */}

Note: The 'use client' directive is automatically included with the AdaptiveScroll component, enabling direct usage in various contexts such as layout and page components within Next.js environments.

Scrollable elements

Once Adaptive Scroll is activated, it effectively takes control over the entire page's scrolling behavior based on the wheel event. This means that certain elements within a page, which might have been scrollable, will no longer have this behaviour.

To make this work, these elements need to be marked with the data-scroll attribute:

<div data-scroll>
  <!-- Content that should be scrollable -->


Adaptive Scroll is open-source software licensed under the MIT license.

Package Sidebar


npm i adaptive-scroll

Weekly Downloads






Unpacked Size

3.83 kB

Total Files


Last publish


  • vaneenige