前端实现自定义滚动条(复制粘贴即可出效果)

一、效果展现

二、代码部分

• CSS部分

.mydiv {
			max-height: 200px;
			overflow: auto;
			background-color: pink;
			width: 200px;
			height: 200px;
		}

		.mydiv::-webkit-scrollbar {
			width: 8px;
			height: 8px;
			background-color: #61B6EB;
		}

		.mydiv::-webkit-scrollbar-track {
			background: #213147;
			border-radius: 2px;
		}

		.mydiv::-webkit-scrollbar-thumb {
			background: #61B6EB;
			border-radius: 2px;
		}

		.mydiv::-webkit-scrollbar-thumb:hover {
			background: #61B6EB;
		}

		.mydiv::-webkit-scrollbar-corner {
			background: #61B6EB;
		}

• HTML部分

<div class="mydiv">
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
		啦啦啦啦
	</div>

三、CSS属性讲解

::-webkit-scrollbar 滚动条整体部分

::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条)

::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）

::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。

::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）

::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处 ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件