滚动条样式修改

在大屏或者一些样式要求情况下，会有滚动条样式调整的需求。以下修改滚动条样式的方法

设置height高度，

overflow：hidden,超出部分隐藏，

overflow-y: auto;   Y方向超出添加滚动条

   height: 180px;
   overflow: hidden;
   overflow-y: auto;
   &::-webkit-scrollbar { /* 整个滚动条样式 */
     width: 8px; /* Width of the scrollbar */
   }
   &::-webkit-scrollbar-track { /* 滚动条轨道选择器 */
     background: rgba(10,28,92,0.39);
   }
   &::-webkit-scrollbar-thumb { /* 滚动条滑块选择器 */
     background: rgba(24,144,255,0.1);
   }
   &::-webkit-scrollbar-thumb:hover { /* 滚动条滑块鼠标悬浮样式 */
     background: rgba(145, 214, 191, 0.1);
   }

 ::-webkit-scrollbar                /* 整个滚动条 */
::-webkit-scrollbar-thumb        /* 滚动条轨道 */
::-webkit-scrollbar-button        /* 滚动条上的两端按钮（上下箭头）*/
::-webkit-scrollbar-track        /* 滚动条轨道 */
::-webkit-scrollbar-track-piece    /* 滚动条没有滑块的轨道部分 */
::-webkit-scrollbar-corner        /* 右下角滚动条交汇处的拖动块（仅在同时有垂直和水平滚动条时）*/
::-webkit-resizer                /* 右下角可拖动调整大小的滑块 */

实例效果对比

小提示：为什么前面会有&符号？？？能否不加（可以，我这里是不加不生效才加上的）

        在CSS中，&符号通常用于引用当前规则集或者父选择器的一部分，尤其是在Sass或Less这样的预处理器中更为常见。但在原生CSS中，特别是在Vue组件样式中使用&，它主要起到的作用是作为当前组件的选择器前缀。

        在这个Vue组件样式示例中，&的使用是为了确保这些滚动条样式仅应用于当前组件内部的元素。这是因为Vue组件的样式默认是局部作用域的，即只对当前组件内的元素生效。当你在样式规则前加上&，它实际上是在每个规则前隐式地添加了当前组件的选择器，确保这些滚动条定制样式不会影响到其他组件或全局的滚动条样式。