To add styles to scroll bars, it is mainly implemented through CSS pseudo-elements and specific attributes. 1. Use the ::-webkit-scrollbar pseudo-element to customize the scrollbar styles of Chrome, Edge, and Safari browsers, including the width, track and slider background, rounded corners, etc.; 2. Use scrollbar-width and scrollbar-color attributes to control the scrollbar width and color in Firefox; 3. To ensure cross-browser compatibility, it is recommended to provide basic available styles for non-WebKit browsers, or introduce JavaScript plug-ins to enhance consistency; 4. In actual applications, you can also set display: none to hide the scrollbar, use border-radius to implement the rounded corner slider, and add transition animations through transition to improve the interactive experience.

Adding styles to scroll bars is actually a bit "edge" CSS skill. Because the default scroll bar style of the browser is usually monotonous, if you want the overall style of the web page to be more unified and more designed, it is necessary to customize the scroll bar. However, it should be noted that currently only some browsers (such as Chrome and its derivative browsers) support deep custom scrollbar styles.

1. Use ::-webkit-scrollbar pseudo-element

This is the most common practice and is suitable for browsers based on WebKit engines such as Chrome, Edge, Safari, etc. Firefox and IE do not support this method, and an alternative will be discussed later.

The basic structure is as follows:

 ::-webkit-scrollbar {
  width: 8px; /* Vertical scroll bar width*/
  height: 8px; /* Horizontal scroll bar height (if required) */
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

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

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

You can adjust the properties of color, rounded corners, background and other colors according to your own color matching to achieve different styles.

2. Use scrollbar-width and scrollbar-color in Firefox

Firefox provides a relatively simple control method. Although its functions are not as powerful as WebKit, it can also meet basic needs.

 /* Set the scroll bar width thin represents narrow scroll bar*/
scrollbar-width: auto | thin;

/* Set scroll bar color*/
scrollbar-color: #888 #f1f1f1;

• The first value is the slider color
• The second value is the track color

You can write it in the container you want to customize the scrollbar, such as:

 .container {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

3. Cross-browser compatibility processing

Due to the different levels of support for scroll bar styles, it is recommended that you do a good job of compatibility:

• Provide a "degraded" version to non-WebKit browsers to maintain availability
• If you are particularly concerned about the consistency of the appearance of scrollbars, you can consider using JavaScript plugins (such as OverlayScrollbars, Perfect Scrollbar)

But if you just want to do lightweight beautification, native CSS is enough.

4. Some tips in practical applications

• Hide scrollbar : Sometimes, for the sake of visual neatness, if you want to hide the scrollbar but retain the scrolling function, you can use the following method (WebKit only):

   ::-webkit-scrollbar {
    display: none;
  }

• Rounded corner slider : Use border-radius to make the slider look more modern, and improve the interaction with background color changes.

• Transition animation : Adding a little transition to the scrollbar slider can make the interaction smoother, such as:

   ::-webkit-scrollbar-thumb {
    transition: background 0.3s ease;
  }

  ---

  Basically these are the methods. Although not all browsers can support it perfectly, in most modern projects, using ::-webkit-scrollbar and Firefox's simple adaptation can meet the needs of most scenarios.

  The above is the detailed content of How to style the scrollbar using CSS?. For more information, please follow other related articles on the PHP Chinese website!