修改滚动条样式

1、什么时候出现滚动条

1. 当容器元素的高度是限定的，容器中的内容的高度超过了容器元素的高度。
2. 为容器元素设置了 overflow: hidden;
3. 为容器元素设置了overflow-y: scroll;

1、实现隐藏滚动条，但还能滚动

容器盒子的高度是限定的，在下面示例中，容器盒子是body；

html,body{
     
      overflow: hidden;
      height: 80%;
    }
body{
     
      overflow-y: scroll;
    }
body::-webkit-scrollbar{
     
      display: none;
    }

容器盒子是div元素或其它。

.container{
     
      overflow: hidden;
      height: 500px;
      overflow-y: scroll;
    }
    
.container::-webkit-scrollbar{
     
      display: none;
    }

2、修改滚动条样式

浏览器的滚动条自带样式很丑，可以自定义修改样式
但是文档中说：该特性是非标准的，请尽量不要在生产环境中使用它！
为容器元素设置以下伪元素样式

• ::-webkit-scrollbar — 整个滚动条.
• ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
• ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
• ::-webkit-scrollbar-track — 滚动条轨道.
• ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
• ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
• ::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

举例：
这个是必须先设置的，这个设置了后面的那些设置才会有效。
width是滚动条的宽度，
height是什么作用不清楚

.container::-webkit-scrollbar {
     
      width: 18px;
      height: 8px;
    }

滚动条滑块的样式

 .container::-webkit-scrollbar-thumb {
     
      background: rgb(122, 214, 61);
      border-radius: 5px;
    }

鼠标hover滑块时滑块的样式，如果不设置，就采用不hover时的样式。

 .container::-webkit-scrollbar-thumb:hover {
     
      background: rgb(167, 13, 13);
      border-radius: 0;
    }

轨道的样式

.container::-webkit-scrollbar-track {
     
      background: rgb(0, 38, 255);
    }