Mac-scrollbar NPM

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-scrollbar

Import 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'