合作联系微信: w6668263      合作联系电话:177-9238-7426     

关于滚动条样式

 

美化滚动条样式,主要涉及以下几个伪元素属性(注,这里以chrome浏览器作示例)

::-webkit-scrollbar

 

用于设置滚动条的整体样式

在这里设置宽高,以控制滚动条尺寸,且必须要设置宽高,否则不生效

宽高分别对应 y轴 和 x轴 的滚动条尺寸

若宽高为0,则可隐藏滚动条,但仍可保持滚动 

  

::-webkit-scrollbar-track

滚动条轨道
不设置则不出现轨道

 

::-webkit-scrollbar-track-piece

没有滑块的滚动条轨道,或者说是内层轨道
同滚动条轨道

 

::-webkit-scrollbar-thumb

滚动条滑块,即滚动条滚动的部分
必须要设置,否则不会出现滑块

 

::-webkit-scrollbar-button

滚动条两端的箭头按钮
不设置则不出现

 

::-webkit-scrollbar-corner

X轴滚动条和Y轴滚动条的交接处
不设置,默认为白色小方块,宽高随X轴和Y轴滚动条尺寸

 

 

 

 

 

 

 

复制代码
/* 滚动条所在容器 */
.scroll-container {
    margin: 10px;
    width: 500px;
    height: 150px;
    overflow: overlay;
    background-color: #eee;
    white-space: nowrap;
}

/* 滚动条整体 */
.scroll-container::-webkit-scrollbar {
    height: 20px;
    width: 20;
}
/* 两个滚动条交接处 -- x轴和y轴 */
.scroll-container::-webkit-scrollbar-corner {
    background-color: transparent;
}

/* 滚动条滑块 */
.scroll-container::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
}

/* 滚动条轨道 */
.scroll-container::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #ededed;
}

/* 滚动条两端按钮 */
.scroll-container::-webkit-scrollbar-button {
} 
复制代码

 

 

 分别设置水平和垂直方向上的滚动条

 
:horizontal:适用于任何水平方向上的滚动条
:vertical:适用于任何垂直方向的滚动条

 

复制代码
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #eee;
    // 添加 horizonal ,单独设置水平方向上的 轨道
    &:horizontal {
        background-color: blue;
    }
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
    // 添加 vertical ,单独设置垂直方向上的 滑块
    &:vertical {
        background-color: red;
    }
}
 
复制代码

 

 

 

 

 

本文参照

作者:Composition
链接:https://juejin.cn/post/6997011443967066143

 

posted on   草率的龙果果  阅读(34)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
历史上的今天:
2013-07-04 用C#读取图片的EXIF信息的方法
点击右上角即可分享
微信分享提示