React Boutique component: Mac-ScrollBar

What is themac-scrollbar

Mac-scrollbar is a MacOS-style React scrollbar component

Why is it neededmac-scrollbar

Problems with scrolling bars between browsers:

• Inconsistent styles affect UI consistency
• The width is inconsistent and the content area is compressed for display
• Width flickers between disabled and enabled
• The ugly

Now, we need a nice and simple macOS-style scrollbar. Features:

• Scroll with a native browser
• The floating scroll bar does not take up width and does not affect the design layout
• No extra DOM level is required, just one div level
• Automatically ADAPTS to changes in width and height
• 2KB compression size
• 99% keep the macOS scroll bar the same and improve it
• Support Chrome, Firefox >= 64, Microsoft Edge >= 79

Note: This component is not compatible with IE11, do not use it unless it is compatible with older browsers.

The state of the regular scroll bar

At present, there are many kinds of browsers. Except for the mainstream browsers Chrome, Safari, Edge and Firefox, other browsers are basically products derived from the Chrome kernel. Therefore, there are currently three types of community implementation of custom scrollbars:

1. Only use CSS::-webkit-scrollbarPseudo classes modify scroll bar styles. Cons: But the styles you can change are limited, and FireFox has no way to customize them
2. The SCrollbar is displayed through a custom div node with CSS pseudo-classes. Disadvantages: Not compatible with IE
3. Fully custom scrolling behavior, high degree of control. Disadvantages: large amount of code, poor performance

Mac-scrollbar falls into the second category. Hide the browser’s default scrollbar with CSS pseudo-classes and style the scrollbar with div. Except the only drawback is not compatible with older browsers such as Internet Explorer. But the advantages are clear: lightweight, close to the performance of the browser’s native scrollbar, and less complex apis and bugs.

Preview feature

Automatically appears when scrolling. When you drag, the scrollbar automatically grows, making it easy to drag and triggering scrolling even when the mouse is away from the container

When you open a web page, the scroll bar displays for a while and then hides automatically, indicating that the content is scrollable

The scrollbar can respond to changes in the size of the container, such as changes in the screen size, or changes in the data displayed in the container (such as obtaining data after a request, etc.). The scrollbar can automatically respond to such changes, and then adjust its display length and moving distance.

Scrollbar styles can be modified dynamically through CSS variables or customized by overwriting CSS classes

It also has a built-in macOS-consistent black theme, which can be turned on by setting the theme parameter

The native scroll bar is used by default on macOS for optimal results and can be turned off using the suppressMacOS parameter

use

yarn add mac-scrollbar
Copy the code

The introduction of the style

import 'mac-scrollbar/dist/style.css';
Copy the code

Local scroll bar

import { MacScrollbar } from 'mac-scrollbar';

function Foo() {
  return (
    <MacScrollbar>
      <div>Content</div>
    </MacScrollbar>
  );
}
Copy the code

Global scrollbar (scroll on window)

import { GlobalScrollbar } from 'mac-scrollbar';

function App() {
  return <GlobalScrollbar />;
}
Copy the code

API

MacScrollbar

GlobalScrollbar

Click star ^_^ if you like

Github.com/MinJieLiu/m…

portal

• # We migrated from UmiJS to Vite
• Forget useCallback, we have a better way
• How to write more elegant code – JavaScript text
• React Hooks performance optimized for correct posture