如何使用-webkit-scrollbar-button添加箭头
发布于2021-03-03 03:30 阅读(2288) 评论(0) 点赞(13) 收藏(5)
我有一个自定义滚动条。自从我这样做以来，滚动条的箭头不再显示。
.scrollbar::-webkit-scrollbar-thumb {
background-color: ##00a7e0;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #F5F5F5;
}
.scrollbar::-webkit-scrollbar-button {
????;
}
我必须在.scrollbar ::-webkit-scrollbar-button中添加什么，才能再次显示我的箭头？
解决方案
（晚宴晚了，但还是很晚）
您可以使用::-webkit-scrollbar-button选择器设置滚动条按钮的样式（有关Webkit滚动条伪选择器的完整详细信息，请参阅此博客文章），但是让它们显示箭头要困难得多，而且大多数人似乎都使用背景图像或完全跳过按钮。
这是使用CSS三角形作为箭头的解决方案：
https://stackoverflow.com/a/46229219/1202275
另一个（基于上面的一个，只有垂直滚动条，但是想法是相同的）：
::-webkit-scrollbar {
width: 16px;
border: 5px solid white;
}
::-webkit-scrollbar-thumb {
background-color: #b0b0b0;
background-clip: padding-box;
border: 0.05em solid #eeeeee;
}
::-webkit-scrollbar-track {
background-color: #bbbbbb;
}
/* Buttons */
::-webkit-scrollbar-button:single-button {
background-color: #bbbbbb;
display: block;
border-style: solid;
height: 13px;
width: 16px;
}
/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
border-width: 0 8px 8px 8px;
border-color: transparent transparent #555555 transparent;
}
::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
border-color: transparent transparent #777777 transparent;
}
/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
border-width: 8px 8px 0 8px;
border-color: #555555 transparent transparent transparent;
}
::-webkit-scrollbar-button:vertical:single-button:increment:hover {
border-color: #777777 transparent transparent transparent;
}
（https://codepen.io/DarthVeyda/pen/eLLbXa）
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/27901/a1c9346c7830d6ffa3f2/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力