How to modify the scroll bar style with css-Front-end Q&A-php.cn

How to modify the scroll bar style with css

PHPz

Release： 2023-04-24 09:31:39

Original

9947 people have browsed it

In recent years, with the development of the Internet, more and more websites have begun to pay attention to user experience. One of the small but important details is the scroll bar style. Traditional scroll bars are not beautiful, and generally only have the default style that comes with the browser and cannot be customized. However, by modifying CSS, we can easily modify the style of the scroll bars to make them more consistent with the overall style of the website.

First of all, we must understand the nature of scroll bars. The scroll bar is actually an element composed of two parts: the slider and the scroll bar track. The slider is used to identify the current position, while the scroll bar track refers to the entire bar element where it is located. Therefore, to modify the scroll bar style, we need to process these two parts separately.

1. Modify the style of the slider

To modify the style of the slider, we can use the pseudo-class selector "::-webkit-scrollbar-thumb". This pseudo-class selector is only valid for browsers with Webkit core, such as Chrome, Safari, etc.

The code is as follows:

::-webkit-scrollbar-thumb {
    background-color: #8B8B8B;
    border-radius: 10px;
}

Copy after login

The above code means to set the background color of the slider to gray and set the corners of the slider to rounded corners.

At the same time, we can also modify other custom styles of the slider, such as setting the width and height:

::-webkit-scrollbar-thumb {
    background-color: #8B8B8B;
    border-radius: 10px;
    width: 10px;
    height: 50px;
}

Copy after login

2. Modify the style of the scroll bar track

To To modify the style of the scroll bar track, we can use the "::-webkit-scrollbar-track" pseudo-class selector.

The code is as follows:

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

Copy after login

The above code indicates that the background color of the scroll bar track is set to light gray, and the corners of the scroll bar track are set to rounded corners.

Similarly, we can also make other custom style modifications to the scroll bar track, such as setting the height and width:

::-webkit-scrollbar-track {
    background-color: #F0F0F0;
    border-radius: 10px;
    width: 20px;
    height: 200px;
}

Copy after login

Note: If the webpage to be modified uses a non-Webkit kernel browsers, such as Firefox and IE, then the above code will not take effect. Therefore, to achieve cross-browser scroll bar style modification, we also need to use some other techniques.

3. Implement cross-browser scroll bar style modification

In order to implement cross-browser scroll bar style modification, we can use a third-party js library-"perfect-scrollbar". This library allows for fully customizable scrollbar modifications and supports all popular browsers, including Chrome, Firefox, Safari, and more.

First, we need to introduce the two files "perfect-scrollbar.css" and "perfect-scrollbar.min.js" in the tag.

<head>
  <link rel="stylesheet" type="text/css" href="path/to/perfect-scrollbar.css">
  <script src="path/to/perfect-scrollbar.min.js"></script>
</head>

Copy after login

Then, add a container div to the area where the style needs to be modified, and add a class with the style class name "ps" to it.

<div class="ps">
  <p>这是需要滚动条的区域</p>
</div>

Copy after login

Next, in js, initialize the container through the statement "new PerfectScrollbar('.ps')".

<script>
   new PerfectScrollbar('.ps');
</script>

Copy after login

Finally, we can add the corresponding style in css to customize the scroll bar.

.ps {
  height: 200px;
  overflow: auto;
}
.ps__rail-x {
  background-color: #eee;
  bottom: 3px;
  height: 10px;
}
.ps__rail-y {
  background-color: #eee;
  width: 10px;
  right: 3px
}
.ps__thumb-x {
  background-color: #a1a1a1;
  border-radius: 6px;
}
.ps__thumb-y {
  background-color: #a1a1a1;
  border-radius: 6px;
  width: 6px;
}

Copy after login

In the above code, ".ps" is the style class name of the container div, and we can set its height, width and other size styles. "__rail-x" and "__rail-y" correspond to the x and y directions of the scroll bar track respectively, and are used to set the style of the scroll bar track. "__thumb-x" and "__thumb-y" correspond to the x and y directions of the slider respectively, and are used to set the style of the slider.

Through the above process, we can already modify the scroll bar style in various browsers. Whether using CSS pseudo-class selectors or third-party libraries, we can easily modify the style of the scroll bar and improve the overall experience of the website.

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