Detailed explanation of how to customize the style of CSS scroll bars

This article introduces the CSS scrollbar selector and shows in a demo how to customize a horizontal and a vertical scrollbar in Webkit browsers and IE browsers.

0. Demand

Sometimes we don't want to use the browser's default scroll bar style because it is not customized and beautiful enough. So how do you customize the style of the scroll bar? Let’s take a look together below.

1 Basics

1.1 CSS scrollbar selector for Webkit core

The ::-webkit-scrollbar CSS pseudo-class selector affects the style of an element's scrollbar.

property:

::-webkit-scrollbar — The entire scrollbar

::-webkit-scrollbar-track — Scrollbar track

::-webkit-scrollbar-thumb — The thumb on the scrollbar

::-webkit-scrollbar-button — Buttons on the scrollbar (up and down arrows)

::-webkit-scrollbar-track-piece — The track part of the scrollbar without the slider

::-webkit-scrollbar-corner — The corner, where the vertical and horizontal scrollbars meet at the same time

::-webkit-resizer — Partial styles for the corner of some elements (e.g. draggable buttons of textarea)

Notice:

(1) Browser support:

::-webkit-scrollbar is only available in browsers that support Webkit (Chrome, Safari).

(2) Vertical/horizontal scroll bars can be set

You can set the scroll bar to be horizontal (:horizontal). If not specified, the default is vertical (:vertical).

(3) Buttons on the scroll bar (:decrement, :increment)

You can set the image, which will be shown in the demo below.

1.2 IE custom scroll bar style

There are relatively few customizable styles, and you can only control the colors displayed on each part of the scroll bar, so the customization is low. Here I only list some styles. I tried styles such as scrollbar-3dlight-color and scrollbar-highlight-color but they didn’t work, so I won’t list them here:

scrollbar-arrow-color — The color of the scrollbar triangle arrow scrollbar-face-color — The color of the scroll bar slider

scrollbar-track-color — The color of the scrollbar track and button background scrollbar-shadow-color — The color of the slider border on the scroll box

2. Get started quickly with demo

2.1 Custom scroll bar styles for Webkit-based browsers (chrome, safari)

If you think the above description is a bit abstract, you can open the demo directly in the browser and understand the meaning of each attribute by referring to the comments in the demo. I have marked some of the properties in the figure. The outer track properties of the scroll bar are not marked in the figure. You can open the Chrome browser console to view the properties:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>scrollbar demo--lynnshen</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    .scolltable {
      width: 500px;
      height: 300px;
      border: 1px solid black;
      
      /*Achieve horizontal and vertical centering*/
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -250px;
      margin-top: -150px;

      overflow: scroll;
    }

    .content {
      /*It should be wider than .scolltable*/
      width: 600px;
    }

    /*whole scroll bar*/

    ::-webkit-scrollbar {
      width: 24px;
      background-color: transparent;
    }

    /* Entire horizontal scroll bar */

    ::-webkit-scrollbar:horizontal {
      height: 24px;
      background-color: transparent;
    }

    /*Scrollbar track*/

    ::-webkit-scrollbar-track {
      background-color: #f6f8fc;
      border-right: 1px solid #f1f5fa;
      border: 1px solid #f1f5fa;
      ;
    }

    /*Vertical slider*/

    ::-webkit-scrollbar-thumb {
      background-color: rgba(220, 228, 243, 1);
      border-radius: 0px;
      border-top: 1px solid #edf2f9;
      border-bottom: 1px solid #edf2f9;
      border-left: 1px solid #f1f5fa;
    }

    /*Horizontal slider*/

    ::-webkit-scrollbar-thumb:horizontal {
      /* background-color: rgba(220, 228, 243, 1); */
      border-radius: 0px;
      border-top: 1px solid #edf2f9;
      /* border-right: 1px solid #f1f5fa;
      border-left: 1px solid #f1f5fa; */
    }

    /*Button on the scroll bar--vertical scroll bar up*/

    ::-webkit-scrollbar-button:decrement {
      border-bottom: 1px solid #edf2f9;
      height: 26px;
      background: url("./images/scroll_up.png") 7px 9px no-repeat;
      border-right: 1px solid #f1f5fa;
      border-left: 1px solid #f1f5fa;
    }

    /*Button on the scroll bar--vertical scroll bar down*/

    ::-webkit-scrollbar-button:increment {
      border-top: 1px solid #edf2f9;
      height: 26px;
      background: url("./images/scroll_down.png") 7px 10px no-repeat;
      border-right: 1px solid #f1f5fa;
      border-left: 1px solid #f1f5fa;
      border-bottom: 1px solid #f1f5fa;
    }

    /*Button on the scroll bar--horizontal scroll bar to the left*/

    ::-webkit-scrollbar-button:horizontal:decrement {
      border-top: 1px solid #edf2f9;
      width: 26px;
      background: url("./images/scroll_left.png") 9px 7px no-repeat;
      border-top: 1px solid #f1f5fa;
      border-bottom: 1px solid #f1f5fa;
      border-right:1px solid #f1f5fa;
    }

    /*Button on the scroll bar--horizontal scroll bar to the right*/

    ::-webkit-scrollbar-button:horizontal:increment {
      border-top: 1px solid #edf2f9;
      width: 25px;
      background: url("./images/scroll_right.png") 10px 7px no-repeat;
      border-left:1px solid #f1f5fa;
    }
    
    /*Corner*/
    ::-webkit-scrollbar-corner{
      border:1px solid #dce4f3;
    }
  </style>
  
</head>

<body>
  <div class="scolltable">
    <div class="content">
      : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
  </div>
</body>

</html>

Result:

WebKit-based browsers

illustrate:

(1) The images used by the buttons at both ends of the scroll bar, and four images used in each of the four corners;

(2).scolltable achieves the effect of horizontal and vertical centering by using absolute alignment to position the element's fixed point at the center of the body. Then use a negative margin (half the element's width and height) to pull it back to the center of the body.

2.2 IE custom scroll bar style

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>scrollbar for IE--lynnshen</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    .scolltable {
      width: 500px;
      height: 300px;
      border: 1px solid black;
      
      /*Achieve horizontal and vertical centering*/
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -250px;
      margin-top: -150px;

      overflow: scroll;
      
      scrollbar-face-color:greenyellow;
      scrollbar-arrow-color:goldenrod;
      scrollbar-shadow-color:red;
      scrollbar-track-color:pink;
    }

    .content {
      /*It should be wider than .scolltable*/
      width: 600px;
    }
    
  </style>
  
</head>

<body>
  <div class="scolltable">
    <div class="content">
      : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
  </div>
</body>

</html>

Result:

3. Summary

This article mainly wants to record how to customize the scroll bar style in Webkit-based browsers and IE, and provides two demos respectively. If you have any questions, please feel free to point them out.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Analysis of the Docker image construction principle (you can build an image without installing Docker)

>>: MySQL online deadlock analysis practice