设置局部滚动条

在很多时候当设置的某些内容超出一定范围的时候会出现全局滚动条，但我们有时候需要的是局部出现滚动条而不是全局出现滚动条，所以在这个时候我们需要给特定的盒子设置局部滚动条。在给盒子设置局部滚动条时如果需要Y轴出现滚动条就需要给它设置固定的高度，同样的如果需要X轴出现滚动条则需要给盒子设置固定的宽度，设置高度时可以直接设置成固定像素也可以设置可以视区域的百分比。

如上图，设置了固定的像素高度和只在盒子的Y轴出现局部滚动条。
overflow-y 为在Y轴出现滚动条 overflow-x 为在X轴出现滚动条 如果直接设置 overflow 则X轴和Y轴都出现滚动条。 设置 auto 为当内容超出给定的宽度或者高度时才出现滚动条，如果不超出则不出现，如果设置为 scroll 即无论内容超不超出给定的范围都出现滚动条，设置为 hidden 则是不出现滚动条且出内容隐藏，还有其他属性值，不过基本用不上。 上图给盒子设置的滚动条效果如下：

觉得滚动条样式不好看还可以给滚动条设置样式。

/*设置滚动条滑块的宽高*/
        ::-webkit-scrollbar {
            width: 10px; 
            height: 10px; 
         }
         /*定义滚动条的轨道颜色、内阴影及圆角*/
         ::-webkit-scrollbar-track{
             background-color: transparent;/*颜色*/
             -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);/*内阴影*/
             border-radius: 3px;/*圆角*/
         }
        /*设置滑块颜色、内阴影及圆角*/
         ::-webkit-scrollbar-thumb{
             -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);/*内阴影*/
             background-color: transparent;/*颜色*/
             border-radius: 7px;/*圆角*/
         }
         /*设置两端按钮的样式*/
         ::-webkit-scrollbar-button {
             background-color:transparent; /*颜色*/
         }
         /*设置右下角交点的样式*/
        ::-webkit-scrollbar-corner {
             background:transparent; /*颜色*/
         }
在这里插入代码片

设置好样式的效果如下，因为将滚动条的颜色设置成了透明色所以在有背景时会不明显，所以在有背景的情况下推荐将滚动条设置为透明色。