📅  最后修改于: 2023-12-03 14:51:30.048000             🧑  作者: Mango
在使用纯 CSS 的情况下,可以使用以下代码片段来更改滚动 CSS 上的导航背景颜色:
/* 设置导航样式 */
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
}
/* 设置滚动条样式 */
.navbar::-webkit-scrollbar {
width: 6px;
background-color: #f5f5f5;
}
.navbar::-webkit-scrollbar-thumb {
background-color: #888;
}
.navbar::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
/* 设置滚动条滑轨样式 */
.navbar::-webkit-scrollbar-track {
background-color: #f5f5f5;
}
/* 设置滚动条角落的样式 */
.navbar::-webkit-scrollbar-corner {
background-color: #f5f5f5;
}
这个代码片段使用了 -webkit
前缀,适用于 WebKit 内核的浏览器(比如 Chrome、Safari)。如果需要兼容其他浏览器,还需要添加相应的前缀。
为了在 HTML 文件中使用这个样式,只需要将类名为 navbar
的元素应用在导航栏的容器上即可。
请注意,这只是更改导航栏滚动背景颜色的一个简单示例,实际应用中可能还需要对其他样式进行调整以达到更好的效果。