How to set div scroll bar in css

With the development of web pages and mobile applications, scroll bars have become an indispensable user experience, and the series of scroll bar style settings provided by CSS3 allow us to customize the scroll bar style more flexibly. Today we Let’s explore how to use CSS to set div scroll bars.

1. Basic settings

We define a div with content in HTML. When the content exceeds the size of the div, we need to use the scroll bar to view it. The following is a basic HTML structure:

<div class="wrapper">
  <div class="content">
    <p>这里是一些内容</p>
    <p>这里也是一些内容</p>
    <p>这里还是一些内容</p>
  </div>
</div>

Next, let’s set the basic style of the div. You can add the following style:

.wrapper {
    width: 300px;
    height: 200px;
    overflow: auto; /* 滚动条设置 */
    margin: 20px;
    border: 1px solid #ccc;
    padding: 10px;
}

.content {
    width: 100%;
    height: auto;
}

By setting the overflow: auto attribute to .wrapper, it will When the scroll bar is hidden, the scroll bar will appear when the content size exceeds the div size without expanding outward and covering other elements.

2. Basic settings of the scroll bar

Next, we can further customize the style of the scroll bar in the following ways:

/* 滚动条整体样式 */
.wrapper::-webkit-scrollbar {
    width: 5px;
    height: 10px;
    background-color: #f5f5f5;
}

/* 滚动条thumb(滑块)样式 */
.wrapper::-webkit-scrollbar-thumb {
    width: 5px;
    height: 10px;
    background-color: #9a9a9a;
}

/* 滚动条hover状态下thumb(滑块)样式 */
.wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

/* 滚动条上下箭头样式 */
.wrapper::-webkit-scrollbar-button {
    background-color: #ccc;
    display: none;
}

/* 滚动条左右箭头样式 */
.wrapper::-webkit-scrollbar-button:start:decrement, .wrapper::-webkit-scrollbar-add-button {
    display: none;
}

.wrapper::-webkit-scrollbar-button:end:increment, .wrapper::-webkit-scrollbar-sub-button {
    display: none;
}

Code analysis:

1. ::-webkit-scrollbar : Select all scroll bar widgets. This style can set the overall width, height and background color of the scroll bar.
2. ::-webkit-scrollbar-thumb : Select the slider. This style can control the width, height and background color of the slider.
3. ::-webkit-scrollbar-thumb:hover: Select the style of the slider in the hover state.
4. ::-webkit-scrollbar-button: Select the arrow parts at both ends of the scroll bar. This style is used to control the background color and whether to display the up, down, left, and right arrows.
5. ::-webkit-scrollbar-button:start:decrement or ::-webkit-scrollbar-sub-button: Select the arrow on the scroll bar (scroll up )/left arrow (scroll left) part, used when the scroll bar is vertical/horizontal.
6. ::-webkit-scrollbar-button:end:increment or ::-webkit-scrollbar-add-button: Select the scroll bar down arrow (down Scroll)/right arrow (scroll right) part, used when the scroll bar is vertical/horizontal.

3. Customized scroll bar

We can customize the style of the scroll bar according to our needs. The following is an example of a custom style:

.wrapper::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #f5f5f5;
}

.wrapper::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #f5f5f5;
}

.wrapper::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #a0a0a0;
}

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

.wrapper::-webkit-scrollbar-corner {
    background-color: #f5f5f5;
}

Code Analysis:

1. ::-webkit-scrollbar-track: Select the track part of the scroll bar, which is the area between the slider and the scroll arrow/scroll area. You can set the track Styles, such as background color, border, rounded corners, etc. In this example, we set rounded corners.
2. ::-webkit-scrollbar-thumb: Select the style of the slider. In this example, we set the rounded corners, and set the background color and hover state of the slider. Lower background color.
3. ::-webkit-scrollbar-corner: Set the color of the corner of the scroll bar. Usually we set it to the same color as the container.

4. Summary

After setting the scroll bar above, we can choose the corresponding style to set according to actual needs, so that we can better experience web pages and mobile applications. interactive experience. At the same time, it should be noted that the above examples are mainly applicable to some Webkit-based browsers such as Chrome and Safari. If you want to adapt to other browsers, you need to use different styles and attributes.

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