KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #typescript #developer-tools #claude-code #ai-agent #codex #deepseek-harness #ai-agents #cli #react #mcp

mac-scrollbar

★ 212 Open GitHub ↗

Scrollbar React component with macOS style.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# mac-scrollbar

**English** | [中文](./packages/mac-scrollbar/README.zh-CN.md)

[![npm](https://img.shields.io/npm/v/mac-scrollbar.svg?style=flat-square)](https://www.npmjs.com/package/mac-scrollbar) [![mac-scrollbar](https://badgen.net/bundlephobia/minzip/mac-scrollbar)](https://github.com/MinJieLiu/mac-scrollbar) [![mac-scrollbar](https://badgen.net/npm/dt/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.

![demo](https://raw.githubusercontent.com/MinJieLiu/mac-scrollbar/main/demo.gif)

## 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 (
    <MacScrollbar>
      <div>Content</div>
    </MacScrollbar>
  );
}
```

Global window scrollbar

```tsx
import { GlobalScrollbar } from 'mac-scrollbar';

function App() {
  return <GlobalScrollbar />;
}
```

### API

#### Common

#### MacScrollbar

mac-scrollbar

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README