To add styles to scrollbars, use the -webkit-scrollbar pseudo-element to customize the appearance of scrollbars in the WebKit browser. 1. Use ::-webkit-scrollbar to set the width; 2. Use ::-webkit-scrollbar-track to define the track background; 3. Use ::-webkit-scrollbar-thumb to set the slider color and rounded corners; 4. Add a hover effect to enhance interactive feedback. For non-WebKit browsers such as Firefox, scrollbar-width can be used to control the scrollbar-width, and scrollbar-color sets the slider and track color. It is recommended to combine JavaScript plug-ins to achieve cross-browser consistency, while paying attention to maintaining usability and adapting to different theme backgrounds, but we need to pay attention to compatibility and future maintenance issues.

Adding styles to scroll bars is originally a headache, because the default scroll bar style looks different on different systems and browsers. If you want to unify the appearance of the scrollbar, especially to implement custom styles in WebKit browsers such as Chrome and Safari, you have to use the pseudo -webkit-scrollbar . However, it should be noted that this approach is mainly aimed at the "private" features of the WebKit kernel browser, so vendor prefixes are needed.

How to style scrollbars using -webkit-scrollbar

The WebKit browser allows you to customize different parts of the scrollbar through a set of pseudo-elements, including sliders, tracks, up and down arrows, etc. You can write this way:

 ::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

This code will set the width of the scrollbar to 8 pixels, the track color to light gray, the slider color to dark gray, and turn black when the mouse hovers. These styles will only be effective in browsers that support WebKit and are not valid in Firefox or IE.

How to handle scrollbar styles in non-WebKit browsers?

Currently, mainstream non-WebKit browsers, such as Firefox, do not support -webkit-scrollbar . But you can do some basic style control through scrollbar-width and scrollbar-color :

 /* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

• scrollbar-width can be set to auto , thin or specific pixel values.
• scrollbar-color controls the color of the slider and the track, and the format is two color values. The first is the slider color and the second is the track color.

Although the style adjustments this way can be made are relatively limited, it can at least maintain a simpler appearance.

Some practical suggestions for scroll bar style design

• Keep consistency : If your application or website needs to display a consistent scrollbar style across browsers, you may want to consider using JavaScript plugins (such as OverlayScrollbars or perfect-scrollbar) that can simulate consistent scrollbar styles in a variety of browsers.
• Don't affect usability : The scroll bar is too narrow or the color contrast is not enough, which may make it difficult for users to operate, especially on touch screen devices.
• Be careful when fitting in dark backgrounds : If you use dark themes, remember to adjust the scrollbar color to make sure it is not "invisible".

Finally, please remind us of compatibility and maintenance issues

• Using -webkit-scrollbar is a hack method that may not be supported by all browsers for a long time in the future.
• If you just want the scrollbar to look a little cleaner, instead of completely redoing a UI, that's enough with simple color and size adjustments.
• The default scroll bar behavior under different operating systems is also different. For example, the scroll bar on macOS is translucent and automatically hidden by default, while it is always displayed on Windows.

Basically that's it. To put it bluntly, using -webkit-scrollbar can solve some of the problems of visual unity, but don't expect it to be perfectly presented in all environments.

The above is the detailed content of Styling scrollbars using vendor prefixes in css. For more information, please follow other related articles on the PHP Chinese website!