修改滚动条的样式

1.滚动条设置为透明（less语法） .scrollbar() {&::-webkit-scrollbar {width: 0.16rem;background-color: transparent;}&::-webkit-scrollbar-track {background-color: transparent;}&::-webkit-scrollbar-thumb {border-radius: 0.08rem;background-color: rgba(255, 255, 255, 0);box-shadow: 0px 1px 3px 0px rgba(44, 47, 49, 0);}/*滚动条的上下两端的按钮*/&::-webkit-scrollbar-button {height: 0px;} } 2.设置有颜色的滚动条 &::-webkit-scrollbar {width: 0.16rem;background: rgba(117, 180, 253, 0.2);box-shadow: 0rem 0.01rem 0.01rem 0rem rgba(1, 69, 132, 0.5);border-radius: 0.08rem;} &::-webkit-scrollbar-track {background-color: transparent;}&::-webkit-scrollbar-thumb {border-radius: 0.08rem;background: rgba(138, 191, 253, 1);box-shadow: 0px 1px 3px 0px rgba(44, 47, 49, 0.4); }/*滚动条的上下两端的按钮*/&::-webkit-scrollbar-button {height: 0px; }

 

转载于:https://www.cnblogs.com/hdff/p/10208463.html

总结

以上是生活随笔为你收集整理的修改滚动条的样式的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。