网页右部滚动条如何做出与众不同的感脚

目录

Blue留言：

 认识滚动条：

如何修改滚动条样式：

结语：

---

Blue留言：

   Hello，各位小伙伴们，依旧是我Blue，今天我们来讲讲滚动条这件事情。我们常见的滚动条一般都是这样的

如图： 

  那就有小伙伴疑惑了，难道就一定的是这样的滚动条吗？不能换一下吗？这太丑了。我先不说答案，给各位看一些不一样的东西。 

这个网站，你发现开始不一样了。它并没有圆角效果。

 这个网页就彻底不一样了。

那么这是如何实现的呢？不妨打开开发者模式，看看吧！！

通过不断的去尝试，我们发现有这样一个元素

 很显然这是一个伪类造成的效果，那么？废话不多说，直接正题

 认识滚动条：

滚动条总共由四个部分组成，分别为：滚动箭头、滑块、滚动轨道、没有滑块的部分，具体看图。

如何修改滚动条样式：

 正如刚才所看到的，我们可以通过伪类来修改其样式

目前我们可以通过 CSS伪类 来实现滚动条的样式修改，以下为修改滚动条样式用到的CSS伪类：
::-webkit-scrollbar — 整个滚动条
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头)
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块
::-webkit-scrollbar-track — 滚动条轨道
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮)

 这里就不细讲这些功能，具体可以看文档：

::-webkit-scrollbar - CSS：层叠样式表 | MDN (mozilla.org)https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar当然，这里也有推荐的博文给大家：

滚动条样式修改_-webkit-scrollbar-CSDN博客

结语：

你好,我是Blue. 为帮助别人少走弯路而写博客 ！！！

如果本篇文章帮到了你 不妨点个赞吧~ 我会很高兴的 😄 (^ ~ ^) 。想看更多 那就点个关注吧 我会尽力带来有趣的内容 😎。

如果你遇到了问题，自己没法解决，可以私信问我。

感谢订阅专栏 三连文章！！