Preview Area (roll view effects)

This is a scrollable area to preview the scrollbar style you designed. The swaggering of the scrollbar can greatly enhance the visual consistency of the web page.

In modern browsers, we can use ::-webkit-scrollbar Series pseudo elements to customise parts of the scroll bar in depth.

This is a scrollbar style presentation text. You can adjust the style parameters above the width, colour, round corner, orbital and slider to preview the visual effects of the custom scrollbar in real time. Custom scrollbars are often used in background management systems, document readers, chat panels, picture gallery, code editor and data tables, helping products to maintain a uniform brand-based visual language under different browsers. The scrollbar in the right preview area is updated as parameters change and supports two sets of stand-alone parameters for the WebKit system browser (Chrome, Edge, Safari, Opera) and Firefox. After generation, copying the code is valid to paste directly to your CSS file.

In addition to appearance parameters, there are commonly used rolling bar interactive recommendations: the mobile scrollbar recommends that hidden orbits be kept only in slides and gestures to reduce visual interference; Tables with data in excess of 200 rows recommend a scrollbar width of not less than 10 px to allow precise drag; The code editor is suitable for matching dark themes to make the slider contrast to the background. If you need to write separate rules for different browsers, you can directly export a copy of the generated WebKit/ Firefox code segment below to paste the item.

The visual details of the scrollbars have a very clear impact on the professional perception of the back-office system: too thick scroll bars crowd into the table content space, and too thin scroll bars are difficult to locate and capture on the 4K monitor on the big screen. It is generally recommended that the width of the desktop-end scrollbar be between 8px and 14px, with a round radius equal to 50% of the width, with a more rounded modern sense of the width, and that the enterprise's internal system be suitable for a straight angle or a small round angle of 2px.

The CSS code that you export already contains the enhanced rules for scrolling bars wide or colouring in a over state, which can be followed by further adjustments to transparency, transition animations to match the interactive rhythm of your project. For Firefox browsers, there are also unique SCrollbar-width and SCrollbar-color properties, which can be found in the following results.

Scrollbar width 12px

Thumb colour

Slider Circle 10px

Orbital (Track) colour

Transparency of orbital background 1

How do you use CSS to change the page scrollbar completely?

The default browser scrollbar is usually grey and operates in different operating systems (e. g. Windows and The performance of the MacOS is very different. For developers who are seeking a very visual experience, it is a very important task to be able to learn from the experience. Custom Scrollbar It's compulsory. This tool is specific to the Webkit kernel browser (Chrome, Safari, new edition) Edge's code gives you perfect control over every pixel in the scrollbar.

1. Core components of the Webkit scrollbar

To be fully customized, you need to understand the following three main hypocritical elements:

::-webkit-scrollbar : The packaging of the entire scrollbar, which can be set at width or height.
::-webkit-scrollbar-track : Track of scrollbar (background area).
::-webkit-scrollbar-thumb : Slider on the scrollbar, the user drags.

2. Addressing common questions: Why is my scrollbar style not working?

When using custom scrollbar codes, developers often encounter the following problems:

Browser compatibility: ::-webkit-scrollbar Only effective at Webkit/Blink kernel. For Firefox, you need to use it. scrollbar-width and scrollbar-color 。 This tool generates primarily Webkit styles, as it provides a more robust customization (e.g. round angles and shadows).
Level issues: Make sure your CSS selector is sufficiently high or directly applied across the board. html or body Go on.
Movement-end performance: In many mobile-end browsers, the scrollbar default is hidden or is taken over by the system, and the custom style may not be shown.

3. Interactive design recommendations

When designing scrollbars, follow the following UX principles:

Contrast: Ensure that the contrast of sliders with orbits is sufficiently high to allow for rapid user positioning.
Medium width: Scroll bars are too narrow (e.g. less than 6px) to cause difficulties in clicking; The idea is that the space is too wide to be used to capture valuable page content.
Visual feedback: Could consider adding :hover , change the colour of the slider when the user is hovering.

4. Progress: How to support Firefox?

Although Firefox has limited customization capacity, you can add the following basic codes to be consistent:

* {
  scrollbar-width: thin;
  scrollbar-color: #7fbf4a #1a1a24;
}

Replace the above colour with the slider and orbital colours that you designed.