To set custom scrollbar styles in Chrome and Edge, use the ::-webkit-scrollbar pseudo-element; in Firefox, use the scrollbar-width and scrollbar-color properties. 1. For the Webkit browser, set the overall width of the scrollbar by defining::-webkit-scrollbar, set the track style by ::-webkit-scrollbar-track, set the slider style by ::-webkit-scrollbar-thumb; 2. For Firefox, use scrollbar-width to control the scrollbar width, and scrollbar-color to set the slider and track color. Compatibility solutions need to include both Webkit styles and Firefox styles for cross-browser consistency.

Custom scroll bars are becoming more and more common in modern web design, especially in projects that pursue brand consistency and user experience optimization. Using CSS to implement custom scrollbars is not complicated, but it needs to be adapted according to different browsers.

How to style scrollbars in Chrome and Edge

Chrome, Edge, and other Chromium-based browsers support ::-webkit-scrollbar pseudo-elements to modify the scrollbar appearance. Although this is not part of the standard CSS, it is very practical in actual development.

You can customize the scrollbar in the following ways:

• Scrollbar overall: ::-webkit-scrollbar
• Scrollbar slider: ::-webkit-scrollbar-thumb
• Scrollbar track: ::-webkit-scrollbar-track

For example, if you want a dark blue slider and a light gray track, you can write it like this:

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

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

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

This method is also effective for mobile Safari.

Scrollbar style settings in Firefox browser

Firefox uses different properties: scrollbar-width and scrollbar-color . Although these two properties are limited in functionality, they are sufficient to achieve basic style adjustment.

• scrollbar-width : Controls the scrollbar width, which can be set to auto, thin or specific pixel values.
• scrollbar-color : Sets the color of the scrollbar and accepts two color values, the first is the slider color and the second is the track color (optional).

The sample code is as follows:

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

It should be noted that these styles can only work on the entire document or certain specific containers, and cannot control each part as finely as Webkit.

Complete solution that is compatible with all browsers

To ensure that you can see a unified style scrollbar style in all major browsers, you need to use both the Webkit style and the Firefox property. You can merge the two together:

 /* Webkit style*/
::-webkit-scrollbar {
  width: 10px;
}

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

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

/* Firefox style*/
* {
  scrollbar-width: thin;
  scrollbar-color: #4caf50 #f1f1f1;
}

Additionally, if you want to completely hide native scrollbars and create virtual scrollbars using JavaScript (such as Perfect Scrollbar or SimpleBar), it is also an advanced alternative, but this is beyond the scope of pure CSS.

Basically that's it. The key to customizing scrollbars with CSS is to distinguish between browser engines and set styles separately. Although Webkit support is more flexible, it is sufficient in most cases after Firefox compatibility processing.

The above is the detailed content of Implementing custom scrollbars with CSS. For more information, please follow other related articles on the PHP Chinese website!