自定义滚动条按钮答案

【问题标题】：Customize Scrollbar button自定义滚动条按钮
【发布时间】：2021-08-04 00:46:15
【问题描述】：

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

但是，滚动条按钮看起来很难看。我正在尝试使按钮如下所示：有人可以帮忙吗？我正在使用下面的 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;
}

【问题讨论】：

标签： css google-chrome webkit scrollbar

【解决方案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>

【讨论】：

【解决方案2】：

带有自定义按钮的滚动条（水平和垂直条）.....Have a look

必须像这样自定义这些类：

    ::-webkit-scrollbar-button:single-button:vertical:decrement {
    border-radius: 5px 5px 0 0
    height: 16px;
    width: 16px;
    background-position: center 4px;
    background-image: url("data:image/svg+xml;utf8,<svg 
    xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(121, 255, 
    108)'><polygon points='50,00 0,50 100,50'/></svg>");
}

【讨论】：