Pure CSS style: very useful scroll bar style

During our usual slicing process, some DIVs will be very ugly if we want to add scroll bars locally.

When we are impatient, we usually use Jquery plug-in to achieve it. And many times we still face compatibility issues. In short, the user experience is not as good as using overflow:scroll directly.

Today I would like to recommend a very easy-to-use pure CSS scroll bar style. You only need to add the following code to your CSS file, and you can use overflow:scroll in different locations. .

The display effect is also very good.

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background-color: #ccc;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #c8c8c8;
}

And you can also directly define colors through CSS.

The above is the detailed content of Pure CSS style: very useful scroll bar style. For more information, please follow other related articles on the PHP Chinese website!