效果图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.scroll {
overflow-y: auto;
overflow-x: auto;
width: 300px;
height: 300px;
border: 1px solid red;
word-break: keep-all;
}
.scroll::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.scroll::-webkit-scrollbar-thumb {
background-color: rgba(128, 128, 128, 0.5);
background-clip: padding-box;
}
.scroll::-webkit-scrollbar-thumb:vertical {
border-left: 10px solid transparent;
border-radius: 16px 4px 4px 16px;
}
.scroll::-webkit-scrollbar-thumb:horizontal {
border-top: 10px solid transparent;
border-radius: 16px 16px 4px 4px;
}
.scroll::-webkit-scrollbar-thumb:hover {
border-radius: 16px;
background-color: rgb(128, 128, 128);
border-color: rgb(128, 128, 128);
}
</style>
</head>
<body>
<div class="scroll">
::-webkit-scrollbar 滚动条整体部分<br/>
::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)<br/>
::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb)<br/>
::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。<br/>
::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)<br/>
::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处<br/>
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件<br/>
<hr/>
::-webkit-scrollbar 滚动条整体部分<br/>
::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)<br/>
::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb)<br/>
::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。<br/>
::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)<br/>
::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处<br/>
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件<br/>
</div>
</body>
</html>
参考地址:https://blog.csdn.net/dKnightL/article/details/88317356