摘要 今天小编跟大家讲解下有关css修改浏览器默认滚动条样式 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css修改浏览器默认滚

今天小编跟大家讲解下有关css修改浏览器默认滚动条样式 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css修改浏览器默认滚动条样式 的相关资料，希望小伙伴们看了有所帮助。

写过挺多项目都需要改变滚动条的默认样式 并不想单独下载和引入插件 因此纯css修改默认滚动条的样式 这次算统一整理下方法，直接上代码。

&::-webkit-scrollbar { // 滚动条的背景 width: 16px; background: #191a37; height: 14px;}&::-webkit-scrollbar-track,&::-webkit-scrollbar-thumb { border-radius: 999px; width: 20px; border: 5px solid transparent;}&::-webkit-scrollbar-track { box-shadow: 1px 1px 5px #191a37 inset;}&::-webkit-scrollbar-thumb { //滚动条的滑块样式修改 width: 20px; min-height: 20px; background-clip: content-box; box-shadow: 0 0 0 5px #464f70 inset;}&::-webkit-scrollbar-corner { background: #191a37;}

下边这个很精简。值得一试

&::-webkit-scrollbar { width: 6px; height: 6px; background: transparent;}&::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px;}&:hover::-webkit-scrollbar-thumb { background: hsla(0, 0%, 53%, 0.4);}&:hover::-webkit-scrollbar-track { background: hsla(0, 0%, 53%, 0.1);}

这个的优点在于 鼠标移上才会显示修改的滚动条 体验很好

隐藏某轴的滚动条代码写法：

overflow-x:hidden;

来源：爱蒂网