::-webkit-scrollbar
滚动条整体部分
::-webkit-scrollbar-thumb
滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)
::-webkit-scrollbar-track
滚动条的轨道(里面装有Thumb)
::-webkit-scrollbar-button
滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece
内层轨道,滚动条中间部分(除去)
::-webkit-scrollbar-corner
边角,即两个滚动条的交汇处
::-webkit-resizer
两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
说明:core_dialogue
为需要美化滚动条div盒子的类名,也可以按照需求更改为其他的名称。
.core_dialogue {
height: 100%;
overflow: scroll;
}
.core_dialogue::-webkit-scrollbar-track-piece {
background-color: #f8f8f800;
}
.core_dialogue::-webkit-scrollbar {
width: 6px;
transition: all 2s;
}
.core_dialogue::-webkit-scrollbar-thumb {
background-color: #dddddd;
border-radius: 100px;
}
.core_dialogue::-webkit-scrollbar-thumb:hover {
background-color: #bbb;
}
.core_dialogue::-webkit-scrollbar-corner {
background-color: rgba(255, 255, 255, 0);
}
效果如下:
【鼠标未选中】
【鼠标选中后】
1)CSS3自定义滚动条样式 -webkit-scrollbar
2)CSS之设置滚动条样式
3)美化element中的el-table滚动条
4)gemini-scrollbar
一般使用原生即可,组件有一些BUG,挺麻烦的,可以简单使用。
介绍:vue-gemini-scrollbar
官网:官网+Demo
npm install vue-gemini-scrollbar --save
参数 | 类型 | 默认值 | 说明 |
---|---|---|---|
autoCreate | Boolean | true | 自动创建自定义滚动条 |
autoshow | Boolean | false | hover时才显示滚动条 |
forceGemini | Boolean | false | 原生滚动条可见的情况下,强制显示自定义滚动条(开发时会比较有用) |
minThumbSize | Number | 20 | 滚动条最小长度 |
事件名称 | 回调参数 | 说明 |
---|---|---|
ready | geminiScrollbar实例 | GeminiScrollbar实例创建 |
resize | - | 滚动区域大小调整时触发 |
方法名称 | 说明 |
---|---|
create | 创建滚动区域 |
update | 重新计算滚动区域大小(vue可以监听并触发组件updated的时候,都不需要你手动去调用它;但是像图片资源的load导致高度变化,你需要在合适的时候去手动调用;) |
destroy | 移除绑定事件及滚动条元素 |
如何调用:
监听ready事件,通过回调函数的参数geminiScrollbar实例来调用这些方法
import Vue from 'vue'
import GeminiScrollbar from 'vue-gemini-scrollbar'
Vue.use(GeminiScrollbar)
template:
content...
注意:只有内容溢出才会有滚动效果
css:
.my-scroll-bar{
height:200px;
}
添加自己的滚动条样式
css:
/* override gemini-scrollbar default styles */
/* vertical scrollbar track */
.gm-scrollbar.-vertical {
background-color: #f0f0f0
}
/* horizontal scrollbar track */
.gm-scrollbar.-horizontal {
background-color: transparent;
}
/* scrollbar thumb */
.gm-scrollbar .thumb {
background-color: rebeccapurple;
}
.gm-scrollbar .thumb:hover {
background-color: fuchsia;
}
因为vue组件的根元素不能为body,此时可以从Vue.$geminiScrollbar
访问到GeminiScrollbar对象,然后你就可以自由使用它了(文档请参考:gemini-scrollbar)。
css:
html {
height: 100%;
/* or */
height: 100vh;
}
js:
var scrollbar = new Vue.$geminiScrollbar({
element: document.body
}).create();