adaptive-scroll

Adaptive Scroll

Introduction

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.

Installation

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

Usage

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
cleanup();

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 (
    <div>
      <AdaptiveScroll />
      {/* Rest of the application */}
    </div>
  );
}

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 -->
</div>

License

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