mac-scrollbar
English | 中文
Scrollbar React component with macOS style.
Why mac-scrollbar
The scroll bar of each browser has a unique style and the width is also inconsistent, thus compressing the display of the content area. Now, we need a beautiful and simple scroll bar from macOS style.
- Use native browser to scroll
- Does not affect the design layout
- No additional DOM hierarchy
- Automatically adapt to change in width and height
- 2KB compressed size
- Support Chrome, Firefox >= 64, Microsoft Edge >= 79
Note This component is not compatible with IE11, it needs to be compatible with lower version browsers.
Usage
yarn add mac-scrollbarImport style
import 'mac-scrollbar/dist/mac-scrollbar.css';Basic
import { MacScrollbar } from 'mac-scrollbar';
function Foo() {
return (
<MacScrollbar>
<div>Content</div>
</MacScrollbar>
);
}Global window scrollbar
import { GlobalScrollbar } from 'mac-scrollbar';
function App() {
return <GlobalScrollbar />;
}API
Common
| Name | Type | Description |
|---|---|---|
| skin | 'light' | 'dark' | Adapt to the background color of the container. Default 'light' |
| trackGap | number | TrackGap | ((showBarX: boolean, showBarY: boolean) => TrackGap) | Gap at the cross end of the scroll bar. Default 16 |
| trackStyle | (horizontal?: boolean) => CSSProperties | |
| thumbStyle | (horizontal?: boolean) => CSSProperties | |
| minThumbSize | number | Minimum thumb bar size. Default 20 |
| suppressAutoHide | boolean | When set to true, the scrollbar will not be automatically hidden. |
MacScrollbar
| Name | Type | Description |
|---|---|---|
| suppressScrollX | number | When set to true, the scrollbar in X-axis will not be available, regardless of the content width. |
| suppressScrollY | number | When set to true, the scroll bar in Y-axis will not be available, regardless of the content height. |
| as | string | Custom element type. Default 'div' |