https://github.com/minjieliu/mac-scrollbar
Scrollbar React component with macOS style.
https://github.com/minjieliu/mac-scrollbar
macos react-component scrollbar
Last synced: 12 months ago
JSON representation
Scrollbar React component with macOS style.
- Host: GitHub
- URL: https://github.com/minjieliu/mac-scrollbar
- Owner: MinJieLiu
- License: mit
- Created: 2021-08-21T14:48:09.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-01-05T08:53:34.000Z (over 1 year ago)
- Last Synced: 2025-04-01T05:38:03.096Z (about 1 year ago)
- Topics: macos, react-component, scrollbar
- Language: TypeScript
- Homepage: https://MinJieLiu.github.io/mac-scrollbar
- Size: 1.38 MB
- Stars: 203
- Watchers: 2
- Forks: 12
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# mac-scrollbar
**English** | [中文](./packages/mac-scrollbar/README.zh-CN.md)
[](https://www.npmjs.com/package/mac-scrollbar) [](https://github.com/MinJieLiu/mac-scrollbar) [](https://github.com/MinJieLiu/mac-scrollbar)
> 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
```shell
yarn add mac-scrollbar
```
Import style
```jsx
import 'mac-scrollbar/dist/mac-scrollbar.css';
```
Basic
```tsx
import { MacScrollbar } from 'mac-scrollbar';
function Foo() {
return (
Content
);
}
```
Global window scrollbar
```tsx
import { GlobalScrollbar } from 'mac-scrollbar';
function App() {
return ;
}
```
### 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' |