使用css修改滚动条样式

真的是书到用时方恨少啊，出一篇文章真的是太难了，当然了，主要是自己太菜了！！

那么，鉴于上一篇文章是内容超出以滚动的方式处理，但是有时候需求可能就是想要有滚动条样式，毕竟这样更直观一点，更有利于用户体验，所以这边文章咱们就说说如何使用css修改滚动条样式。（浏览器挺多的，主要说说Chrome和IE吧）

Chrome

首先咱们可以看看Chrome浏览器中滚动条都有哪些部分 👇👇👇 如图所示，Chrome主要有四个部分组成，那么我们在稍微汇总并弄出一个示例看看效果吧😏

属性	描述
::-webkit-scrollbar	滚动条整体部分
::-webkit-scrollbar-track	滚动条的轨道
::-webkit-scrollbar-track-piece	内层轨道
::-webkit-scrollbar-track-thumb	滚动条里面的滑块
::-webkit-scrollbar-track-button	滚动条的轨道的两端按钮
::-webkit-scrollbar-track-corner	边角，即两个滚动条的交汇处
ps: 主要针对webkit内核的浏览器，使用伪类来改变滚动条的默认样式。

ps: 经过测试，设置滚动条的前提是必须设置滚动条整体部分的大小。轨道的颜色也有一个优先级，即： track-piece > track > scrollbar

下面上示例

<style>
    /* 边角，即两个滚动条的交汇处 --> 粉色(只能设置颜色。大小可跟随轨道变化) */
    .box::-webkit-scrollbar-corner  {
      background: pink;
    }
    /* 滚动条整体部分 --> 红色(可以设置颜色、大小) */
    .box::-webkit-scrollbar{
      width: 20px;
      height: 20px;
      background: red;
    }
    /* 滚动条的轨道 --> 红色(只能设置颜色) */
    .box::-webkit-scrollbar-track{
      background: #CCCC66;
    }
    /* 内层轨道 --> 黄色(只能设置颜色) */
    .box::-webkit-scrollbar-track-piece{
      background: #00ff99;
    }
    /* 滚动条里面的小方块 --> 蓝色(可以设置颜色) */
    .box::-webkit-scrollbar-thumb   {
      background: #1499d6;
    }
    /* 滚动条的轨道的两端按钮 --> 黑色(可以设置颜色、大小) */
    .box::-webkit-scrollbar-button   {
      width: 10px;
      height: 10px;
      background: #666666;
    }
  </style>

效果图 (👀哎哟，不错哦)

IE

IE对于滚动条的样式并不丰富，目前我能找到的就也只有修改颜色的属性。同样的，咱们也先来认识认识它的零件。

属性	描述
scrollbar-highlight-color	滚动条整体的颜色
scrollbar-arrow-color	三角箭头的颜色
scrollbar-face-color	滚动条滑块的颜色
scrollbar-shadow-color	滚动条阴影（边框）的颜色
scrollbar-track-color	滚动条轨道的颜色

ps: 同样的，属性之间也存在优先级，即： track > highlight

话不多说，直接上示例 👇👇👇

<style>
    .box {
      /*三角箭头的颜色 -->红色*/
      scrollbar-arrow-color: #ff0000;
      /*滚动条滑块按钮的颜色 -->绿色*/
      scrollbar-face-color: #00ff99;
      /*滚动条整体颜色-->蓝色*/
      scrollbar-highlight-color: #1499d6;
      /*滚动条阴影-->黑色*/
      scrollbar-shadow-color: #666666;
      /*滚动条轨道颜色-->黄色*/
      scrollbar-track-color: #CCCC66;
    }
  </style>

效果图 (👀嗯~一目了然)

FF

说实话，我是真的没有找到用css去修改火狐浏览器滚动条的方法，所以可以去百度一些js库之类的去修改滚动条，方法还是挺多的，这里我就不多说了。实在不行咱们看看能不能和需求打个商量，就把滚动条隐藏掉吧😂

那么我就补一个隐藏滚动条的方法吧！ (IE、Chrome,、FF的方法都有，并且亲测有效哦😎🀄️)

<style>
	.box {
		// ie隐藏滚动条
		-ms-overflow-style:none; 
		// 火狐隐藏滚动条
		scrollbar-width: none; 
		// 谷歌隐藏滚动条
		&::-webkit-scrollbar { 
			display: none;
		}
	}
</style>