滚动条样式设置

有时候我们写的 ::-webkit-scrollbar 被干扰了，导致写了没有效果。

scrollbar-width 和 scrollbar-color 这两个新的属性，很容易导致我们之前常用的滚动条设置都失效。

应默认预设 scrollbar-width 和 scrollbar-color

@mixin scrollbar-clear($name) {
	#{$name} {
		scrollbar-width: auto !important;
		scrollbar-color: unset !important;
	}
}

@mixin scrollbar() {
	// 移交给专门的混入来完成重设
	// scrollbar-width: auto;
	// scrollbar-color: unset;
	// 滚动条样式
	::-webkit-scrollbar {
		width: $scrollbar-width;
		height: $scrollbar-width;
		border-radius: 0;
	}
	// 滚动条的可拖拽部分（滑块）
	::-webkit-scrollbar-thumb {
		width: $scrollbar-width;
		border-radius: calc($scrollbar-width * 0.5);
		background-color: $alice-yellow;
		&:hover {
			cursor: pointer;
		}
		&:active {
			cursor: grabbing;
			background-color: $alice-yellow;
		}
	}
	// 滚动条的滚动区域（轨道）
	::-webkit-scrollbar-track {
		width: $scrollbar-width;
		border-radius: calc($scrollbar-width * 0.5);
		background-color: $drill-main-color;
	}
	::-webkit-scrollbar-track-piece {
		width: $scrollbar-width;
		background-color: $drill-main-color;
	}
	::-webkit-scrollbar-button {
		display: none;
	}
}