This is the sixth day of my participation in Gwen Challenge

There are often modules to scroll in development, and the original style can affect the customer experience. For faster development in the future, we are now deepening the image.

Attribute profile

Pay attention to::-webkit-scrollbarAvailable only in webKit-enabled browsers. When using the::-webkit-scrollbarAfter that, the default styles will disappear altogether

  1. ::-webkit-scrollbarThe entire scrollbar style.widthControl the width of the vertical scroll bar,heightHorizontal scroll bar width.
<! DOCTYPEhtml>
<html lang="en">
  <style>
    body {
      display: flex;
    }
    .scrollbar {
      width: 100px;
      height: 100px;
      overflow: scroll;
    }
    .test {
      width: 200px;
      height: 400px;
      margin: 0 auto;
    }
    .scrollbar::-webkit-scrollbar {/* scrollbar style */ width:10px; /* Vertical scroll bar width */
      height: 10px; /* Horizontal scroll bar width */
      background: # 000;
    }

    .scrollbar2 {
      margin-left: 10px;
      width: 100px;
      height: 100px;
      overflow: scroll;
    }
    .test2 {
      width: 200px;
      height: 400px;
      margin: 0 auto;
    }
    .scrollbar2::-webkit-scrollbar {/* scrollbar style */ width:20px; /* Vertical scroll bar width */
      height: 20px; /* Horizontal scroll bar width */
      background: # 000;
    }
  </style>
  <body>
    <div class="scrollbar">
      <div class="test">111111111111111 1111111111111111111111 11111111111 11111111111111</div>
    </div>
    <div class="scrollbar2">
      <div class="test2"></div>
    </div>
  </body>
</html>
Copy the code

  1. ::-webkit-scrollbar-buttonButtons on scroll bars (up and down arrows).
    /* Buttons */
    .scrollbar::-webkit-scrollbar-button {
      border: 1px solid #fff;
      height: 10px;
      width: 10px;
      background-color: blueviolet;
    }

    /* Buttons */
    .scrollbar2::-webkit-scrollbar-button {
      border: 1px solid #fff;
      height: 14px;
      width: 14px;
      background-color: blueviolet;
    }
Copy the code

  1. ::-webkit-scrollbar-thumbThe scroll slider on the scroll bar.
    .scrollbar::-webkit-scrollbar-thumb {
      background-color: brown;
      border-radius: 5px;
    }
    
    .scrollbar2::-webkit-scrollbar-thumb {
      background-color: brown;
      border-radius: 10px;
    }
Copy the code

  1. ::-webkit-scrollbar-trackScroll bar track.
    .scrollbar::-webkit-scrollbar-track {
      background-color: burlywood;
      border-radius: 5px;
    }
    .scrollbar2::-webkit-scrollbar-track {
      background-color: burlywood;
      border-radius: 10px;
    }
Copy the code

  1. ::-webkit-scrollbar-track-pieceThe track portion of a scroll bar without a slider
    .scrollbar::-webkit-scrollbar-track-piece {
      background-color: cornflowerblue;
    }
    .scrollbar2::-webkit-scrollbar-track-piece {
      background-color: cornflowerblue;
    }
Copy the code

  1. ::-webkit-scrollbar-cornerThe part where the vertical and horizontal scrollbars meet
    .scrollbar::-webkit-scrollbar-corner {
      background-color: darkgray;
    }
    .scrollbar2::-webkit-scrollbar-corner {
      background-color: darkgray;
    }
Copy the code

  1. ::-webkit-resizerThe partial style of the corner part of some elements (example: draggable button for textarea)

Resize: both is required before using ::-webkit-resizer; Property to allow the user to resize the element.

     .scrollbar {
      width: 100px;
      height: 100px;
      overflow: scroll;
      resize: both;
    }
    .scrollbar::-webkit-resizer {
      background-color: darksalmon;
    }
    .scrollbar2 {
      margin-left: 10px;
      width: 100px;
      height: 100px;
      overflow: scroll;
      resize: both;
    }
    .scrollbar2::-webkit-resizer {
      background-color: darksalmon;
    }
Copy the code

Pseudo classes have also been added for better control of scroll bars.

  1. :horizontalThe horizontal pseudo class represents the scroll bar used to set the horizontal direction
    .scrollbar::-webkit-scrollbar-thumb:horizontal {
      background-color: darkseagreen;
    }
    .scrollbar2::-webkit-scrollbar-track-piece:horizontal {
      background-color: darkseagreen;
    }
Copy the code

  1. :verticalThe vertical pseudo class represents the scroll bar used to set the vertical direction
    .scrollbar2::-webkit-scrollbar-track-piece:vertical {
      background-color: darkseagreen;
    }
    .scrollbar::-webkit-scrollbar-thumb:vertical {
      background-color: darkseagreen;
    }
Copy the code

  1. :decrementSuitable for buttons and orbital debris. Buttons or orbital debris that represent decrement, such as areas and buttons that move the region up or to the right
    .scrollbar::-webkit-scrollbar-button:decrement {
      background-color: deepskyblue;
    }
    .scrollbar2::-webkit-scrollbar-track-piece: Decrement {/* No slider before the track portion */ background-color: deepSkyBlue; }Copy the code

  1. :incrementSuitable for buttons and orbital debris. Represents incremental buttons or orbital debris, such as regions and buttons that move regions down or to the left
    .scrollbar::-webkit-scrollbar-button:increment {
      background-color: goldenrod;
    }
    .scrollbar2::-webkit-scrollbar-track-piece:increment {/* No slider after the track part */ background-color: goldenrod; }Copy the code

  1. :startSuitable for buttons and orbital debris. Indicates whether the object (button track debris) is placed in front of the slider

It has the same effect as: Decrement

  1. :end applies to buttons and orbital debris. Indicates whether the object (button track debris) is placed behind the slider

It has the same effect as :increment

There are also some special pseudo classes are not very useful for development, want to know can see the reference article

Commonly used way

<! DOCTYPEhtml>
<html lang="en">
  <style>
    body {
      display: flex;
    }
    .scrollbar {
      width: 200px;
      height: 200px;
      overflow-x: scroll;
    }
    .test {
      height: 400px;
      margin: 0 auto;
    }

    .scrollbar::-webkit-scrollbar {/* scrollbar style */ width:6px; /* The height and width correspond to the dimensions of the horizontal and vertical scroll bars */
      height: 0px;
    }
    .scrollbar::-webkit-scrollbar-thumb {/* scrollbar-thumb */ border-radius:10px;
      background-color: rgba(0.0.0.0.8);
      background-image: linear-gradient(
        45deg.rgba(255.255.255.0.2) 10%.rgba(255.255.255.0.8) 30%.rgba(255.255.255.0.5) 50%.rgba(255.255.255.0.5) 50%.rgba(255.255.255.0.8) 70%.rgba(255.255.255.0.5) 70%.rgba(255.255.255.0.2) 100%
      );
    }
    .scrollbar::-webkit-scrollbar-track {/* scrollbar-track */ box-shadow: inset0 0 5px rgba(0.0.0.0.2);
      background: #ededed;
      border-radius: 2px;
    }
  </style>
  <body>
    <div class="scrollbar">
      <div class="test">11111111111111 111111111 1111111111111111 111111111111111111111111 1</div>
    </div>
  </body>
</html>
Copy the code

Linear-gradient property is mainly used to set gradients to achieve different styles.

Refer to the article

Webkit kernel scrollbar