定义滚动条样式_jsp 设置滚动条颜色-CSDN博客

本文链接：https://blog.csdn.net/sweet202005/article/details/122840164

定义滚动条样式

.m-scroll-style {
	/** 滚动条样式*/
    &::-webkit-scrollbar {
      width: 6px;
      background-color: rgba(61, 86, 267, 0.2);
      border-radius: 10px;
    }
    // &:hover::-webkit-scrollbar {
    //     width: 6px;
    //     background-color: rgba(61, 86, 267, 0.2);
    //     border-radius: 10px;
    // }
    /** 滚动条里的滑块样式 */
    &::-webkit-scrollbar-thumb {
      background-color: rgba(67, 102, 236, 1);
      border-radius: 10px;
    }
    /* 火狐美化滚动条 */
    scrollbar-color: rgba(67, 102, 236, 1) rgba(61, 86, 267, 0.2);
    /* 滑块颜色  滚动条背景颜色 */
    scrollbar-width: thin;
    /* IE美化滚动条 */
    scrollbar-track-color: transparent;
    -ms-scrollbar-track-color: transparent;
    /* 滚动条宽度有三种：thin、auto、none */
    scrollbar-face-color: rgba(67, 102, 236, 1); /*滚动条3D表面（ThreedFace）的颜色*/
    scrollbar-highlight-color: #fff; /*滚动条3D界面的亮边（ThreedHighlight）颜色*/
    scrollbar-shadow-color: #eeeeee; /*滚动条3D界面的暗边（ThreedShadow）颜色*/
    scrollbar-3dlight-color: #eeeeee; /*滚动条亮边框颜色*/
    scrollbar-arrow-color:rgba(67, 102, 236, 1); /*滚动条方向箭头的颜色 */
    scrollbar-track-color: #fff; /*滚动条的拖动区域(TrackBar)颜色*/
    scrollbar-darkshadow-color: #fff; /*滚动条暗边框（ThreedDarkShadow）颜色*/
}