Table of contents

1 Introduction

This article introduces how to customize your own scroll bars for your own web pages

2. Text

Since the scroll bar is actually an element controlled by the browser most of the time, we can only affect her style through some pseudo-classes. This film introduces the writing method that is specially used to take effect on the webkit engine.

2.1 overflow

The overflow attribute specifies the scene where the content overflows, subdivided into overflow-x, and overflow-y specifies the overflow effect in two directions respectively

overflow: hidden or overflow: visible simply show or hide content
overflow: scroll A scroll bar appears
overflow: auto automatically scrolls in the desired direction

Notice:

The meaning of auto does not appear only when scrolling, but only appears in the corresponding direction

2.2 ::webkit-scrollbar

::-webkit-scrollbar: entire scrollbar

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

::-webkit-scrollbar-thumb: Scrollbar thumb on the scrollbar

::-webkit-scrollbar-track: Scrollbar track

::-webkit-scrollbar-track-piece: The track piece of the scrollbar without a slider

::-webkit-scrollbar-corner: The corner that meets when there is both vertical and horizontal scrolling

::-webkit-resizer: Partial styling of the corner part of certain elements

2.3 Code example

@gray-1: #ffffff;
@gray-2: #fafafa;
@gray-3: #f5f5f5;
@gray-4: #f0f0f0;
@gray-5: #d9d9d9;
@gray-6: #bfbfbf;
@gray-7: #8c8c8c;
@gray-8: #595959;
@gray-9: #434343;
@gray-10: #262626;
@gray-11: #1f1f1f;
@gray-12: #141414;
@gray-13: #000000;

#custom_colors() {
    color_1: #438efd;
    color_2: #f2f9ff;
    color_3: #d5ebff;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  width: 8px;
  background-color: rgba(217, 217, 217, 0.2);
  box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  width: 8px;
  box-shadow: inset 0 0 6px @gray-6;
  -webkit-box-shadow: inset 0 0 6px @gray-6;
  background-color: #custom_colors[color_2];
  background-clip: padding-box;
  border-radius: 5px;
  &:hover,
  &:active {
    background-color: #custom_colors[color_3];
  }
}

::-webkit-scrollbar-corner {
  background-color: @gray-1;
}

2.4 Realize the effect

In focus state,

Implementation of front-end custom scroll bar style