How to modify the scroll bar in css

In web design and development, scroll bars are a widely used element. It allows users to scroll the page and view more content. However, the browser's default scroll bar style may not match the web design, resulting in visual incongruity. To do this, we can use CSS to modify the scroll bar style to better integrate into the web design. This article will introduce how to modify scroll bars through CSS.

1. Understand the various parts of the scroll bar

Before modifying the scroll bar, we need to understand the various parts of the scroll bar. In most browsers, a scrollbar consists of four parts: the slider, the track, the down arrow, and the up arrow. Among them, the slider refers to the part that can be dragged, the track is the area in which the slider moves, and the down arrow and up arrow are the buttons for scrolling down and up respectively.

2. Modify the color of the slider

First, let’s modify the color of the slider. Through the CSS pseudo-element selector, we can select the slider part and modify its color. The specific code is as follows:

/* 选中滑块部分 */
::-webkit-scrollbar-thumb {
  background-color: #666;
}

The above code changes the background color of the slider to dark gray (#666), and can also be modified to other colors as needed.

Note that the CSS style names of scroll bars are slightly different in different browsers. In browsers with Webkit core, such as Chrome, Safari, etc., the selector is "::-webkit-scrollbar-thumb"; in Firefox, the selector is "::-moz-scrollbar-thumb"; in IE and Edge In the browser, the selector is "::-ms-scrollbar-thumb".

3. Modify the track color and background

Next, let’s modify the track color and background. Use the pseudo-element selector to select the track section and modify its style in a slider-like manner. The specific code is as follows:

/* 选中轨道部分 */
::-webkit-scrollbar-track {
  background-color: #eee;
  border-radius: 10px;
}

The above code changes the background color of the track to off-white (#eee), and sets the corner radius of the border to 10 pixels. Again, this can be modified to other colors and corner radii as needed.

4. Modify the arrow style

Finally, let’s modify the arrow style. Unlike sliders and tracks, arrows do not have independent selectors. We need to use a combined selector to modify the style of the arrows. The specific code is as follows:

/* 选中滚动条按钮 */
::-webkit-scrollbar-button {
  background-color: #666;
  display: block;
}

/* 选中向上箭头 */
::-webkit-scrollbar-button:start {
  height: 20px;
  background-image: url('up-arrow.svg');
  background-size: contain;
}

/* 选中向下箭头 */
::-webkit-scrollbar-button:end {
  height: 20px;
  background-image: url('down-arrow.svg');
  background-size: contain;
}

In the above code, we first selected the entire scroll bar button through the selector "::-webkit-scrollbar-button" and set its background color to dark gray (#666) , and display it as a block-level element (display:block;). Next, we use the combo selectors "::-webkit-scrollbar-button:start" and "::-webkit-scrollbar-button:end" to select the up arrow and down arrow respectively, setting their height to 20 pixels ( height:20px;) and add a custom style to the arrow using the background-image and background-size properties. It should be noted that the arrow image needs to be prepared in advance and linked to the CSS file using the correct relative path.

5. Summary

So far, we have learned how to modify the style of the scroll bar by using CSS. By changing the style attributes such as the color, background, and size of sliders, tracks, and arrows, you can make scroll bars better integrated into web design, thereby improving user experience. It should be noted that the CSS style name of the scroll bar may be different in different browsers and needs to be adjusted according to the actual situation.

The above is the detailed content of How to modify the scroll bar in css. For more information, please follow other related articles on the PHP Chinese website!