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

MacScrollbar