我一直在尝试使用::webkit-scrollbar-thumb在窗口中设置一些滚动条的样式。不过，我无法让它工作。有谁知道我在这里错过了什么？我在下面包含一个测试项目 - 谢谢！
.wrapper {
width: 100px;
overflow: auto;
}
.wrapper::-webkit-scrollbar-thumb {
width: 3.125rem;
background-color: #9ac2cd;
border: 0.0625rem solid #e27810;
-webkit-border-radius: 0.375rem;
}<div class="wrapper">
<div style="width:1000px">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem, blanditiis consectetur consequatur consequuntur culpa cupiditate eius ipsum iste iure libero magni natus nulla numquam officia officiis porro quia rem reprehenderit temporibus
unde vel veniam? Animi consequatur excepturi facere harum, nam necessitatibus nostrum optio saepe similique totam ut veniam veritatis?</div>
</div>想通了。为了使&::-webkit-scrollbar-thumb正常工作，您必须事先在同一元素上包含&::-webkit-scrollbar。否则它不会做任何事情。
您必须包含这种 css 代码的和平才能使水平滚动条工作
::-webkit-scrollbar{
width: 12px;
height: 12px;
}
这就是您的最终结果的样子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
::-webkit-scrollbar{
width: 12px;
height: 12px;
}
.wrapper{
width:100px;
overflow-x:auto;
}
.wrapper::-webkit-scrollbar-thumb {
width: 3.125rem;
background-color : #928a22;
border: 0.0625rem solid #e27810;
-webkit-border-radius: 0.375rem;
}
</style>
</head>
<body>
<div class="wrapper">
<div style="width:1000px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem, blanditiis consectetur consequatur consequuntur culpa cupiditate eius ipsum iste iure libero magni natus nulla numquam officia officiis porro quia rem reprehenderit temporibus unde vel veniam? Animi consequatur excepturi facere harum, nam necessitatibus nostrum optio saepe similique totam ut veniam veritatis?
</div>
</div>
</body>
</html>