css - 自定义滚动条按钮

Question

我可以自定义滚动条，现在如下所示

但是，滚动条按钮看起来很难看。我正在尝试使按钮如下所示： 有人可以帮忙吗？我正在使用下面的 css 来自定义滚动条。

::-webkit-scrollbar {
    width: 16px;
}

::-webkit-scrollbar-track {
    background: rgb(224, 224, 224);
}

::-webkit-scrollbar-thumb {
    background: rgb(200, 200, 200);
    border: 0.05em solid #eeeeee;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(180, 180, 180);
}

::-webkit-scrollbar-thumb:active {
    background: rgb(117, 117, 117);
}

::-webkit-scrollbar-button {
    border-style: solid;
    height: 16px;
    width: 16px;
}

::-webkit-scrollbar-button:vertical:decrement {
    border-width: 0 7px 14px 7px;
    border-color: transparent transparent rgb(117, 117, 117) transparent;
}

::-webkit-scrollbar-button:vertical:decrement:hover {
    border-color: transparent transparent rgb(180, 180, 180) transparent;
}

::-webkit-scrollbar-button:vertical:increment {
    border-width: 14px 7px 0 7px;
    border-color: rgb(117, 117, 117) transparent transparent transparent;
}

::-webkit-scrollbar-button:vertical:increment:hover {
    border-color: rgb(180, 180, 180) transparent transparent transparent;
}

标签： cssgoogle-chromewebkitscrollbar

Answer 1

请在下面尝试

.scrollbar
{
	margin-left: 30px;
	float: left;
	height: 300px;
	width: 50px;
	background: #F5F5F5;
	overflow-y: scroll;
	margin-bottom: 25px;
}

.overflow
{
	min-height: 400px;
}

#wrapper
{
	text-align: center;
	width: 500px;
	margin: auto;
}


#stylescroll::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#stylescroll::-webkit-scrollbar
{
	width: 6px;
	background-color: #F5F5F5;
}

#stylescroll::-webkit-scrollbar-thumb
{
	background-color: #a6aebb;
}

<div id="wrapper">
  <div class="scrollbar" id="stylescroll">
    <div class="overflow"></div>
  </div>
</div>