样式滚动条滑块

Question

如何设置在底部水平看到的滑块的滚动条的样式？这是一个大问题，我没有解决办法。我想念什么？我为什么要在这里多加文字？

.slider {
	width: 100%;
	height: auto;
	display: flex;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
		&:-webkit-scrollbar {
			color: red;
			background-color: green;
		}
		&:-scrollbar-button {
			color: blue;
			background-color: yelow;
		}
}

.img {
	flex-shrink: 0;
	max-width: 100%;
	height: 100%;
}

<div class="slider">
<div class="img" id="img"><img src="http://www.placecage.com/c/200/300"></div>
<div class="img" id="img1"><img src="http://www.placecage.com/g/200/300"></div>
<div class="img" id="img2"><img src="http://www.placecage.com/200/300"></div>
<div class="img" id="img3"><img src="http://stevensegallery.com/200/300"></div>
</div>

Answer 1

请参见How TO - Custom Scrollbar

<div class="slider">
<div class="img" id="img"><img src="http://www.placecage.com/c/200/300"></div>
<div class="img" id="img1"><img src="http://www.placecage.com/g/200/300"></div>
<div class="img" id="img2"><img src="http://www.placecage.com/200/300"></div>
<div class="img" id="img3"><img src="http://stevensegallery.com/200/300"></div>
</div>

{{1}}

use :horizontal and/or :vertical，如果您只想更改水平/垂直滚动条。

  

：horizo​​ntal –水平伪类适用于任何滚动条   具有水平方向的碎片。

     

：vertical –垂直伪类适用于任何滚动条   具有垂直方向。