/mac-scrollbar

Scrollbar React component with macOS style.

Primary LanguageTypeScriptMIT LicenseMIT

mac-scrollbar

English | 中文

npm mac-scrollbar 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.

demo

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'