可以通过 CSS 样式自定义滚动条的外观和行为，包括设置颜色、宽度、隐藏、圆角、阴影和滚动行为。兼容性方面，WebKit 内核浏览器使用 ::-webkit-scrollbar，其他浏览器使用相应的 vendor 前缀（如 ::-moz-scrollbar 或 ::-ms-scrollbar）。
CSS 滚动条样式设置
CSS 提供了灵活性，允许开发者自定义滚动条的外观和行为。本文将详细介绍如何使用 CSS 样式设置滚动条。
自定义滚动条颜色
要设置滚动条颜色，可以使用 ::-webkit-scrollbar 和 ::-webkit-scrollbar-thumb 伪元素：
立即学习“前端免费学习笔记（深入）”；
::-webkit-scrollbar {
background-color: lightgray;
}
::-webkit-scrollbar-thumb {
background-color: darkgray;
}设置滚动条宽度
要设置滚动条宽度，可以使用 width 样式属性：
::-webkit-scrollbar {
width: 10px;
}隐藏滚动条
要隐藏滚动条，可以使用 overflow: hidden 属性：
雕鹰团队二次开发服装类商城模板；ecshop 韩都衣舍2014最新豪华版+专题频道页面功能；采用DIV+CSS布局，并优化了很多代码，使模板打开速度更快，更利于SEO搜索引擎优化。顶级分类页调用该分类下精品商品排行，左右切换滚动特效，头部购物车鼠标移入显示购物车商品，首页分类下方调用各分类商品，并且商品有立即购买功能，列表页左侧商品分类默认商品展开状态，点击哪个分类进入此页面，那么这个分类处于展开
#container {
overflow: hidden;
}设置滚动条圆角
要设置滚动条圆角，可以使用 border-radius 样式属性：
::-webkit-scrollbar-track {
border-radius: 5px;
}设置滚动条阴影
要设置滚动条阴影，可以使用 box-shadow 样式属性：
::-webkit-scrollbar {
box-shadow: inset -2px -2px 5px -5px rgba(0, 0, 0, 0.3);
}设置滚动行为
要设置滚动行为，可以使用 scroll-behavior 样式属性。例如，要使滚动更加平滑，可以使用 scroll-behavior: smooth：
#container {
scroll-behavior: smooth;
}浏览器兼容性
需要注意的是，上述 ::-webkit-scrollbar 和 ::-webkit-scrollbar-thumb 伪元素仅适用于 WebKit 内核浏览器，如 Chrome 和 Safari。对于其他浏览器，请使用相应的 vendor 前缀，如 ::-moz-scrollbar（Firefox）或 ::-ms-scrollbar（Edge）。
