flowscrollbar

Scrollbar Component

A customizable React scrollbar component that supports both vertical and horizontal scrolling with drag functionality.

Installation

You can install this package via npm:

npm i flowscrollbar

Usage

import React from "react";
import Scrollbar from "flowscrollbar";


function App() {
  return (
    <Scrollbar height={300} width={500} onScrollYEnd={() => console.log("Reached Y end!")}>
      <div style={{ width: "800px", height: "600px" }}>
        {/* Your scrollable content here */}
        <p>Scrollable Content...</p>
      </div>
    </Scrollbar>
  );
}

export default App;

Props

Prop	Type	Description
height	number	Sets the height of the scrollbar container.
width	number	Sets the width of the scrollbar container.
style	object	Custom styling for the scrollbar track and thumb.
onScrollYEnd	func	Callback when vertical scrolling reaches the end.
onScrollXEnd	func	Callback when horizontal scrolling reaches the end.
beforeEndOffset	number	Offset before triggering onScrollYEnd or onScrollXEnd.
onScroll	func	Callback triggered on scroll events.

Features

• Customizable scrollbar appearance
• Drag functionality for scrolling
• Supports both vertical and horizontal scrolling
• Triggers events when reaching scroll limits
• Fully responsive

Contributing

Contributions are welcome! Feel free to submit a pull request or open an issue.

Author

Developed by Akshay Soni