CSS defines the browser scroll bar style - realize the scroll style of customer service visitor chat interface [unique customer service]

CSS ::-webkit-scrollbarpseudo- to customize the scrollbar style in Webkit-based browsers (such as Chrome, Safari). This pseudo-element can be used to set the width, height, background color, rounded corners, slider style and other properties of the scroll bar. Here is a sample code that demonstrates how to customize the style of the scrollbar:

/* 定义滚动条的宽度、高度和背景色 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #f5f5f5;
}

/* 定义滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #c5c5c5;
}

/* 定义滚动条的边框和圆角 */
::-webkit-scrollbar-track {
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* 定义滚动条滑块在 hover 状态下的样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}

We first define the width, height and background color of the scrollbar, and then define the style of the slider, including rounded corners and background color. Next, we define the border and rounded corners of the scrollbar, and finally define the style of the slider in the hover state.

You can modify the style yourself, my effect