npm install react-scroll-control

react-scroll-control

Control scroll speed in React applications using pure JavaScript — no third-party libraries required.

react-scroll-control provides a simple React hook, useSmoothScroll(), that allows you to slow down or speed up mouse-wheel scrolling by intercepting the browser’s native wheel event and applying controlled, smooth scrolling behavior.

---

📌 Table of Contents

- Introduction
- Features
- Installation
- Usage
- API Reference
- Examples
- Mobile Devices
- Important Notes
- How It Works
- Compatibility
- License
- Connect With Us

---

🧠 Introduction

Modern browsers do not allow direct control over scroll speed.
This package solves that limitation by replacing native wheel scrolling with a controlled scroll behavior using JavaScript — without any external libraries.

---

✨ Features

- Control vertical scroll speed
- Smooth scrolling behavior
- No CSS hacks
- No third-party libraries
- Lightweight custom React hook
- Desktop-optimized scrolling
- Modern ES Module (ESM) support

---

📦 Installation

Using npm:

``

bash

npm install react-scroll-control





🧪 Examples

js

useSmoothScroll(0.3); // very slow scrolling

useSmoothScroll(0.5); // smooth & natural

useSmoothScroll(1); // default browser speed

useSmoothScroll(1.5); // fast scrolling





🚀 Usage

jsx

import useSmoothScroll from "react-scroll-control";



function App() {

  useSmoothScroll(0.5);



  return (

    

      Hello JSX

    

  );

}

⚠️ Important Notes

- This hook replaces native mouse-wheel scrolling

- Uses { passive: false } to allow preventDefault()

- Best used at the root level of the application

- Avoid nested scroll containers

- Not suitable for touch-based scrolling

- Desktop browsers only

🌐 Connect With Us

Petaby Technologies

- 🔗 LinkedIn: https://www.linkedin.com/company/petabytechnologies/
- 📸 Instagram: https://www.instagram.com/petabytechnologies/
- Github: https://github.com/petabytechnology/npm-packages