关于垂直滚动条样式优化

最新推荐文章于 2024-11-17 12:40:55 发布

违规昵称001

最新推荐文章于 2024-11-17 12:40:55 发布

阅读量670

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css3

本文链接：https://blog.youkuaiyun.com/m0_37528005/article/details/103680342

css 专栏收录该内容

10 篇文章

订阅专栏

效果1. 在这里插入图片描述
代码:

.on-live {
    width           : 100%;
    background-color: #fff;
    height          : 360px;
    margin: 23px 0 20px 0;
    overflow-y: auto;
    &::-webkit-scrollbar {
        overflow: visible;
        width: 13px;
    }
    
     /*定义滚动条滑块*/
    &::-webkit-scrollbar-thumb {
        background-color: #92BEFF;
        min-height: 15px;
    }
     /*定义滚动条的轨道颜色、内阴影及圆角*/
     &::-webkit-scrollbar-track{ 
          background-color: #EFF6FF;        
        }
        
             /*定义两端按钮的样式*/
    &::-webkit-scrollbar-button:vertical:start {
        background-color:#EFF6FF; 
        background-image : url("../../../../../ydjy/liveshow-icon.png");
        width            : 11px;
        height           : 11px;
        display          : inline-block;
        background-repeat: no-repeat;
        background-position: -105px -15px;
    }
    &::-webkit-scrollbar-button:vertical:end {
        background-color:#EFF6FF; 
        background-image : url("../../../../../ydjy/liveshow-icon.png");
        width            : 11px;
        height           : 11px;
        display          : inline-block;
        background-repeat: no-repeat;
        background-position: -105px -74px;
    }
}

效果2：
在这里插入图片描述
代码：

//mixin方法，可多处使用
@mixin scrollbar($width, $border-radius) {
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: $width;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: $border-radius;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #B9BAC9;
  }

  &::-webkit-scrollbar-track {
    box-shadow: unset;
    background: #5E5D6E;
    border-radius: $border-radius;
  }

  @media screen and (min--moz-device-pixel-ratio:0) {
    scrollbar-width: thin;
  }
}