React Scrollbars Custom

https://github.com/xobotyi/react-scrollbars-custom
Admin
React Scrollbars Custom is a highly performant and fully customizable React component for creating...
Tokens:12,473
Snippets:45
Trust Score:9.3
License:MIT
Update:11 months ago
Show doc for...
Tokens:
Raw
### Install react-scrollbars-custom with npm or yarn

Source: https://github.com/xobotyi/react-scrollbars-custom/blob/master/README.md

Instructions for installing the react-scrollbars-custom library using either npm or yarn package managers.

```bash
npm install react-scrollbars-custom
# or via yarn
yarn add react-scrollbars-custom
```

--------------------------------

### Basic Scrollbar Component Usage in React

Source: https://context7.com/xobotyi/react-scrollbars-custom/llms.txt

Demonstrates how to import and use the basic Scrollbar component from 'react-scrollbars-custom'. This snippet shows setting width and height constraints for the scrollable area and includes example content.

```jsx
import { Scrollbar } from 'react-scrollbars-custom';

function App() {
  return (
    <Scrollbar style={{ width: 500, height: 400 }}>
      <div style={{ padding: 20 }}>
        <h1>Custom Scrollbar Content</h1>
        <p>Your scrollable content goes here...</p>
        {Array.from({ length: 50 }, (_, i) => (
          <p key={i}>Line {i + 1}</p>
        ))}
      </div>
    </Scrollbar>
  );
}
```

--------------------------------

### Create Custom Scrollbar Renderers in React

Source: https://context7.com/xobotyi/react-scrollbars-custom/llms.txt

Demonstrates complete customization of scrollbar appearance using custom renderer functions for the main element, track, and thumb. The renderer prop receives elementRef and restProps to build custom DOM structures. This example applies gradient backgrounds, custom colors, border-radius, and cursor styles to create a visually distinct scrollbar with gradients and rounded corners.

```jsx
import { Scrollbar } from 'react-scrollbars-custom';

function CustomRenderers() {
  return (
    <Scrollbar
      style={{ width: 400, height: 300 }}
      noDefaultStyles
      renderer={({ elementRef, ...restProps }) => (
        <div
          {...restProps}
          ref={elementRef}
          style={{ ...restProps.style, border: '2px solid blue' }}
        />
      )}
      trackYProps={{
        renderer: ({ elementRef, ...restProps }) => (
          <div
            {...restProps}
            ref={elementRef}
            style={{
              ...restProps.style,
              background: 'linear-gradient(to right, #667eea 0%, #764ba2 100%)',
              width: 12,
              borderRadius: 6
            }}
          />
        )
      }}
      thumbYProps={{
        renderer: ({ elementRef, ...restProps }) => (
          <div
            {...restProps}
            ref={elementRef}
            style={{
              ...restProps.style,
              background: '#ff6b6b',
              borderRadius: 6,
              cursor: 'pointer'
            }}
          />
        )
      }}
    >
      <div style={{ padding: 20 }}>
        {Array.from({ length: 50 }, (_, i) => (
          <p key={i}>Custom styled scrollbar - Line {i + 1}</p>
        ))}
      </div>
    </Scrollbar>
  );
}
```

--------------------------------

### Set Thumb Size Constraints in React Scrollbar

Source: https://context7.com/xobotyi/react-scrollbars-custom/llms.txt

Controls minimum and maximum thumb sizes for scrollbars using minimalThumbSize and maximalThumbSize props. Supports uniform sizing or per-axis configuration with separate X and Y constraints. This example demonstrates both a uniform minimum thumb size and per-axis constraints with different X and Y dimensions for fine-grained control.

```jsx
import { Scrollbar } from 'react-scrollbars-custom';

function ThumbSizeConstraints() {
  return (
    <div>
      {/* Set minimum thumb size for both axes */}
      <Scrollbar
        style={{ width: 400, height: 300 }}
        minimalThumbSize={50}
      >
        <div style={{ height: 10000, padding: 20 }}>
          Very long content with larger minimum thumb
        </div>
      </Scrollbar>

      {/* Different sizes per axis */}
      <Scrollbar
        style={{ width: 400, height: 300 }}
        minimalThumbXSize={30}
        minimalThumbYSize={60}
        maximalThumbXSize={150}
        maximalThumbYSize={200}
      >
        <div style={{ width: 2000, height: 2000, padding: 20 }}>
          Custom thumb size constraints per axis
        </div>
      </Scrollbar>
    </div>
  );
}
```

--------------------------------

### Configure Track Click Behavior in React Scrollbar

Source: https://context7.com/xobotyi/react-scrollbars-custom/llms.txt

Demonstrates how to control scrollbar behavior when clicking the track. The trackClickBehavior prop accepts 'jump' to scroll directly to the clicked position or 'step' to scroll by one page like PageUp/PageDown keys. This example shows both behaviors applied to separate Scrollbar components rendering 100 lines of content.

```jsx
import { Scrollbar } from 'react-scrollbars-custom';

function TrackClickBehavior() {
  return (
    <div>
      {/* Jump directly to clicked position */}
      <Scrollbar
        style={{ width: 400, height: 300 }}
        trackClickBehavior="jump"
      >
        <div style={{ padding: 20 }}>
          {Array.from({ length: 100 }, (_, i) => (
            <p key={i}>Line {i + 1}</p>
          ))}
        </div>
      </Scrollbar>

      {/* Step by one page (like PageUp/PageDown) */}
      <Scrollbar
        style={{ width: 400, height: 300 }}
        trackClickBehavior="step"
      >
        <div style={{ padding: 20 }}>
          {Array.from({ length: 100 }, (_, i) => (
            <p key={i}>Line {i + 1}</p>
          ))}
        </div>
      </Scrollbar>
    </div>
  );
}
```

--------------------------------

### Access Scrollbar Element References in React

Source: https://context7.com/xobotyi/react-scrollbars-custom/llms.txt

Shows how to capture references to internal scrollbar DOM elements (holder, scroller, content, track, thumb) using elementRef callbacks. These refs enable advanced manipulation and inspection of scrollbar components. The example demonstrates accessing multiple element references and logging them via a button click handler.

```jsx
import { Scrollbar } from 'react-scrollbars-custom';
import { useRef } from 'react';

function ElementReferences() {
  const holderRef = useRef(null);
  const scrollerRef = useRef(null);
  const contentRef = useRef(null);
  const trackYRef = useRef(null);
  const thumbYRef = useRef(null);

  const logReferences = () => {
    console.log('Holder element:', holderRef.current);
    console.log('Scroller element:', scrollerRef.current);
    console.log('Content element:', contentRef.current);
    console.log('Track Y element:', trackYRef.current);
    console.log('Thumb Y element:', thumbYRef.current);
  };

  return (
    <div>
      <button onClick={logReferences}>Log Element References</button>
      <Scrollbar
        style={{ width: 400, height: 300 }}
        elementRef={ref => holderRef.current = ref}
        scrollerProps={{
          elementRef: ref => scrollerRef.current = ref
        }}
        contentProps={{
          elementRef: ref => contentRef.current = ref
        }}
        trackYProps={{
          elementRef: ref => trackYRef.current = ref
        }}
        thumbYProps={{
          elementRef: ref => thumbYRef.current = ref
        }}
      >
        <div style={{ padding: 20 }}>
          {Array.from({ length: 50 }, (_, i) => (
            <p key={i}>Line {i + 1}</p>
          ))}
        </div>
      </Scrollbar>
    </div>
  );
}
```

--------------------------------

### Get Scroll State Programmatically with React Scrollbars Custom

Source: https://context7.com/xobotyi/react-scrollbars-custom/llms.txt

This functionality allows programmatic access to the current scroll state of the scrollbar, including all metrics. You can retrieve cached values or force a recalculation for the most up-to-date state. It requires the Scrollbar component and React's useRef and useState hooks.

```jsx
import { Scrollbar } from 'react-scrollbars-custom';
import { useRef, useState } from 'react';

function ScrollState() {
  const scrollbarRef = useRef(null);
  const [state, setState] = useState(null);

  const getState = () => {
    const scrollState = scrollbarRef.current?.getScrollState();
    setState(scrollState);
  };

  const getStateForced = () => {
    // Force recalculation instead of using cached values
    const scrollState = scrollbarRef.current?.getScrollState(true);
    setState(scrollState);
  };

  return (
    <div>
      <button onClick={getState}>Get Scroll State (Cached)</button>
      <button onClick={getStateForced}>Get Scroll State (Forced)</button>
      {state && (
        <pre style={{ fontSize: 12 }}>
          {JSON.stringify(state, null, 2)}
        </pre>
      )}
      <Scrollbar
        style={{ width: 400, height: 300 }}
        elementRef={ref => scrollbarRef.current = ref}
      >
        <div style={{ width: 1500, height: 1500, padding: 20 }}>
          Scrollable content
        </div>
      </Scrollbar>
    </div>
  );
}
```

--------------------------------

### Get Scroll State with TypeScript

Source: https://github.com/xobotyi/react-scrollbars-custom/blob/master/README.md

Retrieves the current scroll state of the scrollable area. The `force` parameter can be used to bypass cached values. The returned object contains various properties related to the content's dimensions, scroll positions, and scrollbar visibility. This method is useful for dynamically adjusting UI based on scrollable content.

```typescript
type ScrollState = {
  /**
   * @description Content's native clientHeight parameter
   */
  clientHeight: number;
  /**
   * @description Content's native clientWidth parameter
   */
  clientWidth: number;
  /**
   * @description Content's native scrollHeight parameter
   */
  scrollHeight: number;
  /**
   * @description Content's native scrollWidth parameter
   */
  scrollWidth: number;
  /**
   * @description Content's native scrollTop parameter
   */
  scrollTop: number;
  /**
   * @description Content's native scrollLeft parameter
   */
  scrollLeft: number;
  /**
   * @description Indicates whether vertical scroll blocked via properties
   */
  scrollYBlocked: boolean;
  /**
   * @description Indicates whether horizontal scroll blocked via properties
   */
  scrollXBlocked: boolean;
  /**
   * @description Indicates whether the content overflows vertically and scrolling not blocked
   */
  scrollYPossible: boolean;
  /**
   * @description Indicates whether the content overflows horizontally and scrolling not blocked
   */
  scrollXPossible: boolean;
  /**
   * @description Indicates whether vertical track is visible
   */
  trackYVisible: boolean;
  /**
   * @description Indicates whether horizontal track is visible
   */
  trackXVisible: boolean;
  /**
   * @description Indicates whether display direction is right-to-left
   */
  isRTL?: boolean;

  /**
   * @description Pages zoom level - it affects scrollbars
   */
  zoomLevel: number;
};

// Example usage (assuming you have a ref to the scrollbar component):
// const scrollState = scrollbarRef.current.getScrollState();
```

--------------------------------

### Scroll Event Handling with Scrollbar Component

Source: https://context7.com/xobotyi/react-scrollbars-custom/llms.txt

Shows how to handle scroll events like 'onScroll', 'onScrollStart', 'onScrollStop', and 'onUpdate' for the Scrollbar component. Callback functions receive scroll metrics and allow monitoring scroll state changes.

```jsx
import { Scrollbar } from 'react-scrollbars-custom';

function ScrollTracker() {
  const handleScroll = (scrollValues, prevScrollValues) => {
    console.log('Current scroll position:', {
      scrollTop: scrollValues.scrollTop,
      scrollLeft: scrollValues.scrollLeft,
      scrollHeight: scrollValues.scrollHeight,
      scrollWidth: scrollValues.scrollWidth,
      clientHeight: scrollValues.clientHeight,
      clientWidth: scrollValues.clientWidth
    });
  };

  const handleScrollStart = (scrollValues) => {
    console.log('Scroll started at:', scrollValues.scrollTop);
  };

  const handleScrollStop = (scrollValues) => {
    console.log('Scroll stopped at:', scrollValues.scrollTop);
  };

  const handleUpdate = (scrollValues, prevScrollValues) => {
    // Called on any scroll state change (size, position, etc.)
    if (scrollValues.scrollYPossible !== prevScrollValues.scrollYPossible) {
      console.log('Vertical scrolling is now:',
        scrollValues.scrollYPossible ? 'possible' : 'not possible'
      );
    }
  };

  return (
    <Scrollbar
      style={{ width: 400, height: 300 }}
      onScroll={handleScroll}
      onScrollStart={handleScrollStart}
      onScrollStop={handleScrollStop}
      onUpdate={handleUpdate}
      scrollDetectionThreshold={150}
    >
      <div style={{ padding: 20 }}>
        {Array.from({ length: 100 }, (_, i) => (
          <p key={i}>Scrollable line {i + 1}</p>
        ))}
      </div>
    </Scrollbar>
  );
}
```

--------------------------------

### Calculate Element Dimensions with content-box and clientHeight/clientWidth

Source: https://github.com/xobotyi/react-scrollbars-custom/blob/master/testbench/benchmarks.html

Retrieves both height and width for content-box box-sizing combining clientHeight/clientWidth with getComputedStyle padding extraction. Converts CSS strings by slicing 'px' suffix.

```JavaScript
const styles = getComputedStyle(div2);
const paddingTop = styles.paddingTop ? styles.paddingTop.slice(0, -2) : 0;
const paddingBottom = styles.paddingBottom ? styles.paddingBottom.slice(0, -2) : 0;
const paddingLeft = styles.paddingLeft ? styles.paddingLeft.slice(0, -2) : 0;
const paddingRight = styles.paddingBottom ? styles.paddingRight.slice(0, -2) : 0;
return {
  height: Math.max(
    div2.clientHeight - paddingTop - paddingBottom,
    0
  ),
  width: Math.max(
    div2.clientWidth - paddingLeft - paddingRight,
    0
  )
};
```

--------------------------------

### Scrolling Control Methods

Source: https://github.com/xobotyi/react-scrollbars-custom/blob/master/README.md

Methods for programmatically scrolling the content area.

```APIDOC
## Scroll Control Methods

### Description
Provides methods to programmatically control the scroll position of the scrollable area.

### Methods

#### scrollToTop()
- **Description**: Scrolls the content to the very top border of the scrollable area.
- **Method**: POST
- **Endpoint**: `/scrollToTop`

#### scrollToLeft()
- **Description**: Scrolls the content to the very left border of the scrollable area.
- **Method**: POST
- **Endpoint**: `/scrollToLeft`

#### scrollToBottom()
- **Description**: Scrolls the content to the very bottom border of the scrollable area.
- **Method**: POST
- **Endpoint**: `/scrollToBottom`

#### scrollToRight()
- **Description**: Scrolls the content to the very right border of the scrollable area.
- **Method**: POST
- **Endpoint**: `/scrollToRight`

#### scrollTo(x?: number, y?: number)
- **Description**: Sets the current scroll position to the given coordinates. If either `x` or `y` is `undefined`, the corresponding scroll position remains unchanged.
- **Method**: POST
- **Endpoint**: `/scrollTo`
- **Parameters**:
  - **x** (number) - Optional - The target horizontal scroll position.
  - **y** (number) - Optional - The target vertical scroll position.

#### centerAt(x?: number, y?: number)
- **Description**: Centers the viewport at the given coordinates. If either `x` or `y` is `undefined`, the corresponding position remains unchanged.
- **Method**: POST
- **Endpoint**: `/centerAt`
- **Parameters**:
  - **x** (number) - Optional - The target horizontal center coordinate.
  - **y** (number) - Optional - The target vertical center coordinate.

### Request Example (for scrollTo)
```json
{
  "x": 100,
  "y": 200
}
```

### Request Example (for centerAt)
```json
{
  "x": 500,
  "y": 600
}
```
```

--------------------------------

### Basic Usage of Scrollbar Component in React

Source: https://github.com/xobotyi/react-scrollbars-custom/blob/master/README.md

Demonstrates the basic implementation of the Scrollbar component in a React application. It requires setting width and height, either inline or via CSS, for the component to function correctly. The content is placed within the Scrollbar tags.

```typescript jsx
import { Scrollbar } from 'react-scrollbars-custom';

<Scrollbar style={{ width: 250, height: 250 }}>
  <p>Hello world!</p>
</Scrollbar>;
```

--------------------------------

### Benchmark Element Inner Sizes Detection (JavaScript)

Source: https://github.com/xobotyi/react-scrollbars-custom/blob/master/testbench/benchmarks.html

Benchmarks different methods for detecting the inner sizes (height and width) of HTML elements, considering CSS box-sizing properties. It compares approaches using getComputedStyle, clientHeight, clientWidth, and parseFloat. This snippet relies on the Benchmark.js library.

```javascript
function runInnerSizesBench() { "use strict"; (() => { document.getElementById("Results").innerHTML = ""; let container = document.createElement("div"); document.getElementById("Results").appendChild(container); container.innerHTML += "<h3>Element inner sizes detection</h3>"; let div1 = document.createElement("div"); div1.style.height = "200.5px"; div1.style.width = "100.5px"; div1.style.padding = "25.25px"; div1.style.position = "absolute"; div1.style.top = "-9999px"; div1.style.left = "-9999px"; div1.style.boxSizing = "border-box"; document.body.appendChild(div1); document.getElementById("Results").appendChild(container); let div2 = document.createElement("div"); div2.style.height = "200.5px"; div2.style.width = "100.5px"; div2.style.padding = "25.25px"; div2.style.position = "absolute"; div2.style.top = "-9999px"; div2.style.left = "-9999px"; div2.style.boxSizing = "content-box"; document.body.appendChild(div2); let suite = new Benchmark.Suite(); suite .on("cycle", ({ target: { name, hz, fn } }) => { let p = document.createElement("p"); p.innerText = `${name} × ${Math.floor( hz ).toLocaleString()} ops/sec; (result: "${fn()}")`; container.appendChild(p); }) .on("complete", () => { document.body.removeChild(div1); document.body.removeChild(div2); container.innerHTML += "<h4>DONE!</h4>"; }); suite .add( "[height] [border-box] getComputedStyle + clientHeight ", () => { const styles = getComputedStyle(div1); const paddingTop = styles.paddingTop ? styles.paddingTop.slice(0, -2) : 0; const paddingBottom = styles.paddingBottom ? styles.paddingBottom.slice(0, -2) : 0; return Math.max( div1.clientHeight - paddingTop - paddingBottom, 0 ); } ) .add("[height] [border-box] getComputedStyle (parse float) ", () => { const styles = getComputedStyle(div1); if (styles.boxSizing === "border-box") { return Math.max( (parseFloat(styles.height) || 0) - (parseFloat(styles.paddingTop) || 0) - (parseFloat(styles.paddingBottom) || 0), 0 ); } return parseFloat(styles.height) || 0; }) .add("[height] [border-box] getComputedStyle (unary plus)", () => { const styles = getComputedStyle(div1); return styles.boxSizing === "border-box" ? Math.max( (styles.height ? styles.height.slice(0, -2) : 0) - (styles.paddingBottom ? styles.paddingBottom.slice(0, -2) : 0) - (styles.paddingTop ? styles.paddingTop.slice(0, -2) : 0), 0 ) : +(styles.height && styles.height.slice(0, -2)); }) .add( "[both] [border-box] getComputedStyle + clientHeight/clientWidth (parse float) ", () => { const styles = getComputedStyle(div1); const paddingTop = styles.paddingTop ? styles.paddingTop.slice(0, -2) : 0; const paddingBottom = styles.paddingBottom ? styles.paddingBottom.slice(0, -2) : 0; const paddingLeft = styles.paddingL
```

--------------------------------

### Customize Scrollbar Element Rendering with React

Source: https://github.com/xobotyi/react-scrollbars-custom/blob/master/README.md

Allows customization of individual scrollbar elements (holder, wrapper, scroller, content, tracks, thumbs) by providing custom React components via the renderer prop. This enables full control over markup and styling. Ensure to pass elementRef and necessary styles for proper functionality.

```jsx
<Scrollbar
  renderer={(props) => {
    const { elementRef, ...restProps } = props;
    return <span {...restProps} ref={elementRef} className="MyAwesomeScrollbarsHolder" />;
  }}
  wrapperProps={{
    renderer: (props) => {
      const { elementRef, ...restProps } = props;
      return <span {...restProps} ref={elementRef} className="MyAwesomeScrollbarsWrapper" />;
    },
  }}
  scrollerProps={{
    renderer: (props) => {
      const { elementRef, ...restProps } = props;
      return <span {...restProps} ref={elementRef} className="MyAwesomeScrollbarsScroller" />;
    },
  }}
  contentProps={{
    renderer: (props) => {
      const { elementRef, ...restProps } = props;
      return <span {...restProps} ref={elementRef} className="Content" />;
    },
  }}
  trackXProps={{
    renderer: (props) => {
      const { elementRef, ...restProps } = props;
      return <span {...restProps} ref={elementRef} className="TrackX" />;
    },
  }}
  trackYProps={{
    renderer: (props) => {
      const { elementRef, ...restProps } = props;
      return <span {...restProps} ref={elementRef} className="trackY" />;
    },
  }}
  thumbXProps={{
    renderer: (props) => {
      const { elementRef, ...restProps } = props;
      return <span {...restProps} ref={elementRef} className="ThUmBX" />;
    },
  }}
  thumbYProps={{
    renderer: (props) => {
      const { elementRef, ...restProps } = props;
      return <span {...restProps} ref={elementRef} className="tHuMbY" />;
    },
  }}
/>
```

--------------------------------

### Generated HTML Structure for Scrollbars

Source: https://github.com/xobotyi/react-scrollbars-custom/blob/master/README.md

Illustrates the default HTML structure generated by the react-scrollbars-custom component. This includes elements for the holder, wrapper, scroller, content, and tracks/thumbs. Class names like 'trackYVisible', 'dragging', and 'rtl' are applied dynamically.

```html
// scrollbar.holderElement
<div class="ScrollbarsCustom trackYVisible trackXVisible">
  // scrollbar.wrapperElement - the one that hiding native scrollbars
  <div class="ScrollbarsCustom-Wrapper">
    // scrollbar.scrollerElement - the one that actually has browser's scrollbars
    <div class="ScrollbarsCustom-Scroller">
      // scrollbar.contentElement - the one that holds tour content
      <div class="ScrollbarsCustom-Content">// YOUR CONTENT IS HERE</div>
    </div>
  </div>
  // scrollbar.trackYElement
  <div class="ScrollbarsCustom-Track ScrollbarsCustom-TrackY">
    // scrollbar.thumbYElement
    <div class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbY" />
  </div>
  // scrollbar.trackXElement
  <div class="ScrollbarsCustom-Track ScrollbarsCustom-TrackX">
    // scrollbar.thumbXElement
    <div class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbX" />
  </div>
</div>
```

--------------------------------

### Calculate Element Dimensions with content-box and parseFloat

Source: https://github.com/xobotyi/react-scrollbars-custom/blob/master/testbench/benchmarks.html

Computes both height and width for content-box box-sizing using parseFloat conversion with fallback values. Handles box-sizing model differentiation with conditional return statements.

```JavaScript
let styles = getComputedStyle(div2);
return styles.boxSizing === "border-box" ? {
  height: Math.max(
    (parseFloat(styles.height) || 0) - (parseFloat(styles.paddingTop) || 0) - (parseFloat(styles.paddingBottom) || 0),
    0
  ),
  width: Math.max(
    (parseFloat(styles.width) || 0) - (parseFloat(styles.paddingLeft) || 0) - (parseFloat(styles.paddingRight) || 0),
    0
  )
} : {
  height: parseFloat(styles.height) || 0,
  width: parseFloat(styles.width) || 0
};
```

--------------------------------

### Calculate Element Dimensions with border-box and parseFloat

Source: https://github.com/xobotyi/react-scrollbars-custom/blob/master/testbench/benchmarks.html

Computes both height and width for border-box box-sizing using parseFloat to convert CSS string values. Subtracts padding values and ensures non-negative results using Math.max.

```JavaScript
let styles = getComputedStyle(div1);
return styles.boxSizing === "border-box" ? {
  height: Math.max(
    (parseFloat(styles.height) || 0) - (parseFloat(styles.paddingTop) || 0) - (parseFloat(styles.paddingBottom) || 0),
    0
  ),
  width: Math.max(
    (parseFloat(styles.width) || 0) - (parseFloat(styles.paddingLeft) || 0) - (parseFloat(styles.paddingRight) || 0),
    0
  )
} : {
  height: parseFloat(styles.height) || 0,
  width: parseFloat(styles.width) || 0
};
```

--------------------------------

### Benchmark UUID Generators (JavaScript)

Source: https://github.com/xobotyi/react-scrollbars-custom/blob/master/testbench/benchmarks.html

Benchmarks different methods for generating UUIDs in JavaScript. It measures the operations per second for each UUID generation function. This snippet relies on the Benchmark.js library.

```javascript
"use strict"; function runGuidsBench() { "use strict"; document.getElementById("Results").innerHTML = ""; let container = document.createElement("div"); document.getElementById("Results").appendChild(container); container.innerHTML += "<h3>UUID generators</h3>"; let suite = new Benchmark.Suite(); suite .on("cycle", ({ target: { name, hz, fn } }) => { let p = document.createElement("p"); p.innerText = `${name} × ${Math.floor( hz ).toLocaleString()} ops/sec; (result: "${fn()}")`; container.appendChild(p); }) .on("complete", () => { document.getElementById("Results").classList.remove("loading"); container.innerHTML += "<h4>DONE!</h4>"; }); suite .add("var 1", () => { let uuid = "", ii; for (ii = 0; ii < 32; ii += 1) { switch (ii) { case 8: case 20: uuid += "-" + ((Math.random() * 16) | 0).toString(16); break; case 12: uuid += "-4"; break; case 16: uuid += "-" + ((Math.random() * 4) | 8).toString(16); break; default: uuid += ((Math.random() * 16) | 0).toString(16); } } return uuid; }) .add("var 2", () => { let uuid = "", i, random; for (i = 0; i < 32; i++) { random = (Math.random() * 16) | 0; if (i === 8 || i === 12 || i === 16 || i === 20) { uuid += "-"; } uuid += (i === 12 ? 4 : i === 16 ? (random & 3) | 8 : random ).toString(16); } return uuid; }) .add("var 3", () => { let uuid = ""; for (let i = 0; i < 32; i++) { if (i === 8 || i === 20) { uuid += "-" + ((Math.random() * 16) | 0).toString(16); } else if (i === 12) { uuid += "-4"; } else if (i === 16) { uuid += "-" + ((Math.random() * 16) | (0 & 3) | 8).toString(16); } else { uuid += ((Math.random() * 16) | 0).toString(16); } } return uuid; }) .run({ async: true }); }
```

--------------------------------

### Calculate Element Height with content-box and parseFloat

Source: https://github.com/xobotyi/react-scrollbars-custom/blob/master/testbench/benchmarks.html

Determines element height for content-box box-sizing using parseFloat conversion with fallback to 0. Differentiates between border-box and content-box models with conditional logic.

```JavaScript
const styles = getComputedStyle(div2);
if (styles.boxSizing === "border-box") {
  return Math.max(
    (parseFloat(styles.height) || 0) - (parseFloat(styles.paddingTop) || 0) - (parseFloat(styles.paddingBottom) || 0),
    0
  );
}
return parseFloat(styles.height) || 0;
```

--------------------------------

### Calculate Element Height with content-box and clientHeight

Source: https://github.com/xobotyi/react-scrollbars-custom/blob/master/testbench/benchmarks.html

Retrieves element height for content-box box-sizing using clientHeight property combined with getComputedStyle padding values. Removes 'px' suffix using string slice method.

```JavaScript
const styles = getComputedStyle(div2);
const paddingTop = styles.paddingTop ? styles.paddingTop.slice(0, -2) : 0;
const paddingBottom = styles.paddingBottom ? styles.paddingBottom.slice(0, -2) : 0;
return Math.max(
  div2.clientHeight - paddingTop - paddingBottom,
  0
);
```

--------------------------------

### Calculate Element Height with content-box and Unary Plus Operator

Source: https://github.com/xobotyi/react-scrollbars-custom/blob/master/testbench/benchmarks.html

Computes element height for content-box box-sizing using unary plus operator for type coercion. Handles both border-box and content-box models with short-circuit evaluation for padding values.

```JavaScript
const styles = getComputedStyle(div2);
return styles.boxSizing === "border-box" ? Math.max(
  div2.clientHeight - (styles.paddingBottom && styles.paddingBottom.slice(0, -2)) - (styles.paddingTop && styles.paddingTop.slice(0, -2)),
  0
) : +(styles.height && styles.height.slice(0, -2));
```

--------------------------------

### Native Scrollbar Fallback Mode

Source: https://context7.com/xobotyi/react-scrollbars-custom/llms.txt

Fallback to native browser scrollbars when custom scrollbars are not needed or on mobile devices. Supports native mode for all cases or mobileNative for device-specific behavior. Maintains consistent API across both custom and native scrollbar implementations.

```jsx
import { Scrollbar } from 'react-scrollbars-custom';

function NativeScrollbar() {
  return (
    <div>
      {/* Always use native scrollbars */}
      <Scrollbar
        native
        style={{ width: 400, height: 300 }}
      >
        <div style={{ padding: 20 }}>
          Content with native scrollbars
        </div>
      </Scrollbar>

      {/* Use native only on mobile (when scrollbar width is 0) */}
      <Scrollbar
        mobileNative
        style={{ width: 400, height: 300 }}
      >
        <div style={{ padding: 20 }}>
          Custom on desktop, native on mobile
        </div>
      </Scrollbar>
    </div>
  );
}
```

--------------------------------

### Scroll to Top/Bottom/Left/Right with JavaScript

Source: https://github.com/xobotyi/react-scrollbars-custom/blob/master/README.md

Provides methods to programmatically scroll the content to the top, bottom, left, or right borders of the scrollable area. These methods are useful for resetting scroll positions or creating interactive scrolling experiences. They return `this` for chaining.

```javascript
// Assuming scrollbarRef is a ref to your Scrollbars component

// Scroll to the top
// scrollbarRef.current.scrollToTop();

// Scroll to the bottom
// scrollbarRef.current.scrollToBottom();

// Scroll to the left
// scrollbarRef.current.scrollToLeft();

// Scroll to the right
// scrollbarRef.current.scrollToRight();
```

--------------------------------

### Programmatic Scroll Control with Scrollbar Component

Source: https://context7.com/xobotyi/react-scrollbars-custom/llms.txt

Illustrates how to control scroll position programmatically using a ref attached to the Scrollbar component. It includes functions to scroll to top, bottom, specific coordinates, and center the viewport, utilizing a chainable API.

```jsx
import { Scrollbar } from 'react-scrollbars-custom';
import { useRef } from 'react';

function ScrollController() {
  const scrollbarRef = useRef(null);

  const handleScrollToTop = () => {
    scrollbarRef.current?.scrollToTop();
  };

  const handleScrollToBottom = () => {
    scrollbarRef.current?.scrollToBottom();
  };

  const handleScrollTo = () => {
    // Scroll to specific coordinates
    scrollbarRef.current?.scrollTo(100, 200);
  };

  const handleCenterAt = () => {
    // Center viewport at specific coordinates
    scrollbarRef.current?.centerAt(500, 300);
  };

  return (
    <div>
      <div style={{ marginBottom: 10 }}>
        <button onClick={handleScrollToTop}>Scroll to Top</button>
        <button onClick={handleScrollToBottom}>Scroll to Bottom</button>
        <button onClick={handleScrollTo}>Scroll to 100, 200</button>
        <button onClick={handleCenterAt}>Center at 500, 300</button>
      </div>
      <Scrollbar
        style={{ width: 600, height: 400 }}
        elementRef={ref => scrollbarRef.current = ref}
      >
        <div style={{ width: 2000, height: 2000, padding: 20 }}>
          Large scrollable content area
        </div>
      </Scrollbar>
    </div>
  );
}
```

--------------------------------

### RTL Support with react-scrollbars-custom

Source: https://context7.com/xobotyi/react-scrollbars-custom/llms.txt

Implement right-to-left language support with automatic or explicit RTL configuration. Supports both CSS direction property detection and rtl prop for manual control. Properly handles scroll behavior and positioning for RTL content such as Arabic or Hebrew text.

```jsx
import { Scrollbar } from 'react-scrollbars-custom';

function RTLScrollbar() {
  return (
    <div>
      {/* Auto-detect RTL from CSS */}
      <Scrollbar style={{ width: 400, height: 300, direction: 'rtl' }}>
        <div style={{ padding: 20 }}>
          <p>محتوى قابل للتمرير باللغة العربية</p>
          {Array.from({ length: 50 }, (_, i) => (
            <p key={i}>السطر {i + 1}</p>
          ))}
        </div>
      </Scrollbar>

      {/* Explicit RTL prop */}
      <Scrollbar
        style={{ width: 400, height: 300 }}
        rtl={true}
      >
        <div style={{ padding: 20 }}>
          Right-to-left content
        </div>
      </Scrollbar>
    </div>
  );
}
```

--------------------------------

### Calculate Element Height with border-box and getComputedStyle

Source: https://github.com/xobotyi/react-scrollbars-custom/blob/master/testbench/benchmarks.html

Calculates element height for border-box box-sizing model using getComputedStyle with padding adjustment. Extracts numeric values from CSS strings by slicing off 'px' suffix and returns the maximum of calculated height or 0.

```JavaScript
const styles = getComputedStyle(div1);
const paddingTop = styles.paddingTop ? styles.paddingTop.slice(0, -2) : 0;
const paddingBottom = styles.paddingBottom ? styles.paddingBottom.slice(0, -2) : 0;
return Math.max(
  div1.clientHeight - paddingTop - paddingBottom,
  0
);
```

--------------------------------

### Integrate Scrollbar Context API with React Scrollbars Custom

Source: https://context7.com/xobotyi/react-scrollbars-custom/llms.txt

This feature enables sharing the scrollbar instance across the component tree using React's Context API. This allows child components to interact with the parent scrollbar, such as scrolling to the top. It requires importing Scrollbar and ScrollbarContext from 'react-scrollbars-custom' and using the useContext hook.

```jsx
import { Scrollbar, ScrollbarContext } from 'react-scrollbars-custom';
import { useContext } from 'react';

function ChildComponent() {
  const { parentScrollbar } = useContext(ScrollbarContext);

  const scrollToTopFromChild = () => {
    parentScrollbar?.scrollToTop();
  };

  return (
    <div>
      <button onClick={scrollToTopFromChild}>
        Scroll Parent to Top
      </button>
    </div>
  );
}

function ScrollbarWithContext() {
  return (
    <Scrollbar
      style={{ width: 400, height: 300 }}
      createContext
    >
      <div style={{ padding: 20 }}>
        {Array.from({ length: 30 }, (_, i) => (
          <p key={i}>Line {i + 1}</p>
        ))}
        <ChildComponent />
        {Array.from({ length: 30 }, (_, i) => (
          <p key={i + 30}>Line {i + 31}</p>
        ))}
      </div>
    </Scrollbar>
  );
}
```

--------------------------------

### Permanent Scrollbar Tracks Display

Source: https://context7.com/xobotyi/react-scrollbars-custom/llms.txt

Display scrollbar tracks permanently regardless of content overflow using permanentTracks or permanentTrackY props. Provides consistent UI by showing scroll indicators even for short content. Supports both axes independently or simultaneously for flexible layout control.

```jsx
import { Scrollbar } from 'react-scrollbars-custom';

function PermanentTracks() {
  return (
    <div>
      {/* Both tracks always visible */}
      <Scrollbar
        style={{ width: 400, height: 300 }}
        permanentTracks
      >
        <div style={{ padding: 20 }}>
          Short content but scrollbars are visible
        </div>
      </Scrollbar>

      {/* Only vertical track permanent */}
      <Scrollbar
        style={{ width: 400, height: 300 }}
        permanentTrackY
      >
        <div style={{ padding: 20 }}>
          Vertical track always visible
        </div>
      </Scrollbar>
    </div>
  );
}
```

--------------------------------

### Scroll to Specific Coordinates with JavaScript

Source: https://github.com/xobotyi/react-scrollbars-custom/blob/master/README.md

Allows setting the scroll position to specific X and Y coordinates. If either `x` or `y` is `undefined`, the corresponding scroll position remains unchanged. This method offers precise control over the viewport's scroll position.

```javascript
// Assuming scrollbarRef is a ref to your Scrollbars component

// Scroll to x: 100, y: 200
// scrollbarRef.current.scrollTo(100, 200);

// Scroll only horizontally to x: 50
// scrollbarRef.current.scrollTo(50);

// Scroll only vertically to y: 150
// scrollbarRef.current.scrollTo(undefined, 150);
```

--------------------------------

### Center Viewport at Coordinates with JavaScript

Source: https://github.com/xobotyi/react-scrollbars-custom/blob/master/README.md

Centers the viewport at the specified X and Y coordinates. Similar to `scrollTo`, if `x` or `y` is `undefined`, that dimension is not adjusted. This method is useful for focusing the view on a particular element or area within the scrollable content.

```javascript
// Assuming scrollbarRef is a ref to your Scrollbars component

// Center at x: 100, y: 200
// scrollbarRef.current.centerAt(100, 200);

// Center horizontally at x: 50
// scrollbarRef.current.centerAt(50);

// Center vertically at y: 150
// scrollbarRef.current.centerAt(undefined, 150);
```

--------------------------------

### Scroll State

Source: https://github.com/xobotyi/react-scrollbars-custom/blob/master/README.md

Retrieves the current scroll state, including dimensions, scroll positions, and scrollability indicators.

```APIDOC
## GET /scrollState

### Description
Retrieves the current scroll-related values. If the `force` parameter is falsy, it returns a cached value updated by the RAF loop. Otherwise, it forces an immediate update before returning the state.

### Method
GET

### Endpoint
`/scrollState`

### Parameters
#### Query Parameters
- **force** (boolean) - Optional - If true, forces an immediate update of the scroll state before returning it.

### Response
#### Success Response (200)
- **clientHeight** (number) - The native clientHeight of the content.
- **clientWidth** (number) - The native clientWidth of the content.
- **scrollHeight** (number) - The native scrollHeight of the content.
- **scrollWidth** (number) - The native scrollWidth of the content.
- **scrollTop** (number) - The native scrollTop of the content.
- **scrollLeft** (number) - The native scrollLeft of the content.
- **scrollYBlocked** (boolean) - Indicates whether vertical scroll is blocked via properties.
- **scrollXBlocked** (boolean) - Indicates whether horizontal scroll is blocked via properties.
- **scrollYPossible** (boolean) - Indicates whether the content overflows vertically and scrolling is not blocked.
- **scrollXPossible** (boolean) - Indicates whether the content overflows horizontally and scrolling is not blocked.
- **trackYVisible** (boolean) - Indicates whether the vertical track is visible.
- **trackXVisible** (boolean) - Indicates whether the horizontal track is visible.
- **isRTL** (boolean) - Optional - Indicates whether the display direction is right-to-left.
- **zoomLevel** (number) - The current page zoom level, which affects scrollbars.

### Response Example
```json
{
  "clientHeight": 500,
  "clientWidth": 800,
  "scrollHeight": 1000,
  "scrollWidth": 1200,
  "scrollTop": 200,
  "scrollLeft": 300,
  "scrollYBlocked": false,
  "scrollXBlocked": false,
  "scrollYPossible": true,
  "scrollXPossible": true,
  "trackYVisible": true,
  "trackXVisible": true,
  "isRTL": false,
  "zoomLevel": 1
}
```
```

--------------------------------

### Translate Content Sizes to Holder with React Scrollbars Custom

Source: https://context7.com/xobotyi/react-scrollbars-custom/llms.txt

This functionality allows the content dimensions to be translated to the holder element, useful for variable-size containers. It supports translating both width and height, or just height. Dependencies include the Scrollbar component from 'react-scrollbars-custom'.

```jsx
import { Scrollbar } from 'react-scrollbars-custom';

function ContentSizeTranslation() {
  return (
    <div>
      {/* Container grows with content */}
      <Scrollbar
        translateContentSizesToHolder
        disableTracksWidthCompensation
        style={{ maxWidth: 600, maxHeight: 400 }}
      >
        <div style={{ padding: 20 }}>
          <p>This container will size itself to the content dimensions</p>
          <p>It will respect maxWidth and maxHeight</p>
        </div>
      </Scrollbar>

      {/* Only translate height */}
      <Scrollbar
        translateContentSizeYToHolder
        style={{ width: 400, maxHeight: 400 }}
      >
        <div style={{ padding: 20 }}>
          Height adjusts to content, width is fixed
        </div>
      </Scrollbar>
    </div>
  );
}
```

--------------------------------

### Controlled Scroll Position with React State

Source: https://context7.com/xobotyi/react-scrollbars-custom/llms.txt

Manage scroll position through React state and props for synchronized scrolling scenarios. Uses scrollTop and scrollLeft props to control vertical and horizontal scroll positions, with onScroll callback to update state. Useful for linking multiple scrollable elements or providing external scroll controls.

```jsx
import { Scrollbar } from 'react-scrollbars-custom';
import { useState } from 'react';

function ControlledScrollbar() {
  const [scrollTop, setScrollTop] = useState(0);
  const [scrollLeft, setScrollLeft] = useState(0);

  const handleScroll = (scrollValues) => {
    setScrollTop(scrollValues.scrollTop);
    setScrollLeft(scrollValues.scrollLeft);
  };

  return (
    <div>
      <div style={{ marginBottom: 10 }}>
        <label>
          Vertical: <input
            type="range"
            min="0"
            max="1000"
            value={scrollTop}
            onChange={e => setScrollTop(Number(e.target.value))}
          />
        </label>
        <label>
          Horizontal: <input
            type="range"
            min="0"
            max="1000"
            value={scrollLeft}
            onChange={e => setScrollLeft(Number(e.target.value))}
          />
        </label>
      </div>
      <Scrollbar
        style={{ width: 400, height: 300 }}
        scrollTop={scrollTop}
        scrollLeft={scrollLeft}
        onScroll={handleScroll}
      >
        <div style={{ width: 1500, height: 1500, padding: 20 }}>
          Controlled scrollable content
        </div>
      </Scrollbar>
    </div>
  );
}
```

--------------------------------

### Disabling Scroll Directions

Source: https://context7.com/xobotyi/react-scrollbars-custom/llms.txt

Control which scroll directions are allowed using noScrollX, noScrollY, or noScroll props. Prevents unwanted scrolling in specific directions while maintaining full API functionality. Useful for constraining content navigation to single axis or creating non-scrollable containers.

```jsx
import { Scrollbar } from 'react-scrollbars-custom';

function ScrollDirectionControl() {
  return (
    <div>
      {/* Disable horizontal scrolling */}
      <Scrollbar
        style={{ width: 400, height: 300 }}
        noScrollX
      >
        <div style={{ width: 2000, padding: 20 }}>
          Only vertical scroll enabled
        </div>
      </Scrollbar>

      {/* Disable vertical scrolling */}
      <Scrollbar
        style={{ width: 400, height: 300 }}
        noScrollY
      >
        <div style={{ height: 2000, padding: 20 }}>
          Only horizontal scroll enabled
        </div>
      </Scrollbar>

      {/* Disable all scrolling */}
      <Scrollbar
        style={{ width: 400, height: 300 }}
        noScroll
      >
        <div style={{ padding: 20 }}>
          No scrolling allowed
        </div>
      </Scrollbar>
    </div>
  );
}
```

--------------------------------

### Disable Mousewheel Scrolling on Tracks with React Scrollbars Custom

Source: https://context7.com/xobotyi/react-scrollbars-custom/llms.txt

This feature prevents scrolling when the mouse wheel is activated over the scrollbar track area. It can be disabled globally for all tracks or specifically for the vertical or horizontal tracks. The Scrollbar component from 'react-scrollbars-custom' is required.

```jsx
import { Scrollbar } from 'react-scrollbars-custom';

function DisableTrackMousewheel() {
  return (
    <div>
      {/* Disable mousewheel on both tracks */}
      <Scrollbar
        style={{ width: 400, height: 300 }}
        disableTracksMousewheelScrolling
      >
        <div style={{ padding: 20 }}>
          {Array.from({ length: 50 }, (_, i) => (
            <p key={i}>Mousewheel disabled on tracks - Line {i + 1}</p>
          ))}
        </div>
      </Scrollbar>

      {/* Disable only on vertical track */}
      <Scrollbar
        style={{ width: 400, height: 300 }}
        disableTrackYMousewheelScrolling
      >
        <div style={{ padding: 20 }}>
          Vertical track mousewheel disabled
        </div>
      </Scrollbar>
    </div>
  );
}
```
Tokens:
Raw