【发布时间】：2022-10-01 07:45:32
【问题描述】：
我创建了一个包含overflow-y: scroll; 的 div，但现在我正在尝试更改该滚动条颜色而不影响浏览器滚动条颜色。
.details{
display: grid;
grid-template-columns: repeat(5,1fr);
grid-gap:4rem;
}
.ben-details,.lucy-details,.castle-details,.brett-details,.sheldon-details{
background-color: #421803;
height:10rem;
overflow-y: scroll;
scroll-behavior: smooth;
margin-left: 2rem;
}
.ben-details h6,.lucy-details h6,.castle-details h6,.brett-details h6,.sheldon-details h6{
text-align: center;
color: #421803;
font-size: 12px;
}
.ben-details p,.lucy-details p,.castle-details p,.brett-details p,.sheldon-details p{
text-align: justify;
color: #B99C7E;
font-size: 10px;
max-width: 6rem;
} <div class=\"details\">
<div class=\"ben-details\">
<h6>Marketing Leading</h6>
<p>With 5 years experience in marketing,
Ben does a great job of marketing our brand</p>
</div>
<div class=\"lucy-details\">
<h6>Head of HR</h6>
<p>Lucy is the head of HR, she works with the company and the
employees to retain existing employees and hiring new talent.</p>
</div>
<div class=\"castle-details\">
<h6>Sales Lead</h6>
<p>Castle is our lead Sales and his core values are building a
respectful and trusting relationships with our clients.</p>
</div>
<div class=\"brett-details\">
<h6>CEO</h6>
<p>Brett built this company from the ground up and is proud of where it is today.
He works with the company to help accomplish the company goals. He believes good
leaders step up and work along with thier employees.
</p>
</div>
<div class=\"sheldon-details\">
<h6>Front-End Developer</h6>
<p>Sheldon is a talented Front-End Developer who works with the Marketing lead to
keep our beautiful website up to date with our current and new products.
</p>
</div>
</div>我确实在以下 div 类下尝试了scrollbar-color:#B99C7E：
- 本-详细信息
- lucy-详细信息
- 城堡细节
- brett-详细信息
- 谢尔顿详细信息
但没有运气。我知道 ::-webkit-scrollbar 会改变浏览器滚动条，但不是我想要的。