纯css修改浏览器scrollbar滚动条样式
0
把网站前台的UI设计好之后，前台去浏览，有时候总觉得怪怪的。最后发现问题是因为浏览器的滚动条不协调导致的。而且，不同浏览器的滚动条还有很多差别。
这里，我们可以通过css修改浏览器scrollbar滚动条样式的方法，让页面更加美观舒适。
纯css修改浏览器scrollbar滚动条样式代码：
::-webkit-scrollbar {
width: .5rem;
height: .5rem;
background: hsla(0, 0%, 100%, 0.6);
}
::-webkit-scrollbar-track {
border-radius: 0;
}
::-webkit-scrollbar-thumb {
border-radius: 0;
background-color: rgba(95,95,95,.4);
transition: all .2s;
border-radius: .5rem;
&:hover {
background-color: rgba(95,95,95, .7);
}
}将以上代码直接放到的css文件里面，刷新下页面即可看到新的滚动条效果。
微信 支付宝 QQ 扫码打赏
html去滚动条 css窗口滚动条 css纵向滚动条 css隐藏滚动条样式 css滚动条颜色 css滚动条代码 css3滚动条 css竖滚动条 css修改滚动条