google浏览器::-webkit-scrollbar-thumb设置容器滚动条滑块不生效

目录

一、问题

二、原因及解决方法

三、总结

---

如嫌繁琐，可直接移步至总结

一、问题

1.使用 ::-webkit-scrollbar-thumb设置滚动条的颜色一直不生效。

      &::-webkit-scrollbar-thumb {background-color: #b3b3b3;border-radius: 10px;}

二、原因及解决方法

1.原因: 可能是设置了滑块的border，容器的宽度又刚好<-borderWidth*2

2.解决方法：设置border为none

      &::-webkit-scrollbar-thumb {background-color: #b3b3b3;border: none;border-radius: 10px;}

3.最终效果：终于好了

三、总结

1.样式设置不生效：最好试试 所有属性都重置为没有，再添加想要的样式看看效果——重置为初，控制变量

2.欸，我看了好久都不知道为啥，一直显示白色，原来时之前的代码设置了border为白色。呜呜呜，今天又遇到还又想了半天@——@

3.滚动条样式设置总结

   1）::webkit-scrollbar-thumb 主要用于设置滑块的样式

   2) ::webkit-scrollbar-track 主要用于设置滑块后面的轨道样式 

   3) :webkit-scrollbar  整个滚动条的样式（全局样式），主要用于设置滚动条的宽高。

/*

希望对你有帮助！

如有错误，欢迎指正！

*/