本文主要介绍CSS自定义滚动条样式案例的详细说明。本文通过一个简单的案例来说明对这项技术的理解和使用。以下是详细内容，有需要的朋友可以参考一下。
CSS3自定义滚动条样式 -webkit-scrollbar
当内容超过容器的内容时，容器中就会出现滚动条，而它本身的滚动条有时并不能满足我们的审美要求，所以我们可以通过css伪类来定制滚动条。
首先，我们需要了解滚动条。从外观上看，滚动条由两部分组成：1。可滑动的部分，我们称之为slider 2，还有滚动条的轨迹，也就是滑块的轨迹。一般来说，滑块的颜色比轨道的颜色深。
滚动条的css样式主要由三部分组成：
:-webkit-scrollbar定义滚动条的整体样式；
:-webkit-scrollbar-thumb slider部件；
:-webkit-scrollbar-thumb track部分；
下面是overflow-y:auto；示例(溢出-x:自动)
Html代码：
div class='测试测试-1 '
div class='scrollbar'/div
/div
Css代码：测试{
宽度：50px
高度：200px
溢出：自动；
浮动：左；
保证金：5px
边框：无；
}。滚动条{
宽度：30px
高度：300px
边距：0自动；
}。test-1:-webkit-scrollbar {/*滚动条的整体样式*/
宽度：10px/*高度和宽度分别对应滚动条的大小*/
高度：1px
}。test-1:-WebKit-scroll bar-thumb {/*滚动条内的小方块*/
边框半径：10px
-WebKit-box-shadow:inset 0 0 5px rgba(0，0，0，0.2)；
背景：# 535353；
}。test-1:-WebKit-scroll bar-track {/*在滚动条内跟踪*/
-WebKit-box-shadow:inset 0 0 5px rgba(0，0，0，0.2)；
边框半径：10px
背景：# EDEDED
}
效果如下：
要更改滚动条的宽度：请在：-webkit-scrollbar中进行更改；如果你想改变滚动条滑块的圆角，在：-WebKit-scroll bar-thumb；如果要更改的轨道圆角在：-webkit-scrollbar-track中更改；
此外，滚动条的滑块不仅可以填充颜色，还可以填充图片，如下所示：
Css代码：test-5:-webkit-scrollbar {/*滚动条的整体样式*/
宽度：10px/*高度和宽度分别对应滚动条的大小*/
高度：1px
}。test-5:-WebKit-scroll bar-thumb {/*滚动条内的小方块*/
边框半径：10px
背景色：# F90
背景-图像：-WebKit-线性-渐变(45deg，rgba(255，255，255， 2) 25%，透明25%，透明50%，rgba(255，255，255， 2) 50%，rgba(255，255，255， 2) 75%，透明75%，透明)；
}。test-5:-WebKit-scroll bar-track {/*在滚动条内跟踪*/
-WebKit-box-shadow:inset 0 0 5px rgba(0，0，0，0.2)；
/* border-radius:10px；*/
背景：# EDEDED
}
Html代码：
div class='测试测试-5 '
div class='scrollbar'/div
/div
效果如下：
以上可以制作你喜欢的滚动条；
如果文档中有多个滚动条，并且所有的滚动条都应该有相同的样式，那么就不需要添加类、id、标签名等任何东西。在伪元素前面。
这就是本文关于CSS自定义滚动条样式案例的详细解释。关于CSS自定义滚动条样式的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。