Skip to content

Scrollable

Jump to bottom
Dan edited this page Jan 10, 2024 · 2 revisions

Scrollable

Overview

The Scrollable component is a custom React component designed to provide a customizable scrollbar for overflow content. This component is perfect for scenarios where the default browser scrollbar needs to be replaced or enhanced for a more consistent or stylized look across different browsers and platforms.

Installation

To use the Scrollable component in your React application, import it as follows:

const { Scrollable } = window.$_gooee.framework;

Usage

The Scrollable component wraps any child elements that require a custom scrollbar. It automatically calculates and adjusts the scrollbar thumb size and position based on the content size.

Props

  • children: The content to be displayed inside the scrollable area.

Functionalities

  • Dynamic Scrollbar Thumb: Adjusts the size of the scrollbar thumb dynamically based on the content size.
  • Custom Scroll Handling: Implements custom scroll behavior, enhancing the default scrolling experience.
  • Mouse Event Handling: Handles mouse down, move, and up events for scrollbar interaction.
  • Audio Feedback: Provides audio feedback on certain interactions (e.g., hover) using the engine.trigger method.

Methodology

  1. Scroll Position Calculation: Uses custom logic to calculate the current scroll position.
  2. Thumb Size and Position: Dynamically calculates the size and position of the scrollbar thumb to reflect the current scroll state.
  3. Event Handling: Handles mouse events for interactive elements like the scrollbar thumb and track.

Styling

The component uses the following CSS classes:

  • scrollable vertical: The main container of the scrollable area.
  • content: The container for the scrollable content.
  • track: The scrollbar track.
  • thumb: The scrollbar thumb.

These can be styled or overridden as needed for custom appearance.

Accessibility

Ensure that the custom scrollbar meets all accessibility requirements, including keyboard navigability and screen reader support.

Browser Support

The Scrollable component is compatible with all modern web browsers, including Chrome, Firefox, Safari, and Edge.

Examples

Basic Usage

<Scrollable>
    <p>Your scrollable content here</p>
</Scrollable>

Contributing

Contributions to improve the Scrollable component are welcomed. Follow the project's contribution guidelines for submitting bug fixes, feature requests, or enhancements.

Clone this wiki locally