滚动条样式修改
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
| // 火狐浏览器
.dashboard-container,
.no-page-table .layui-table-main{
// scrollbar-color: #0064a7 #8ea5b5; // 如果有scrollbar-width才设置
scrollbar-width:none; // 目前只有3个值可选：auto、thin、none
}
// 针对谷歌浏览器、360浏览器、safari浏览器、Edge、Opera等
.no-page-table ::-webkit-scrollbar,
.right-content ::-webkit-scrollbar{ /* 滚动条整体部分 */
width: 0;
margin-right:2px
}
.no-page-table ::-webkit-scrollbar-button,
.right-content ::-webkit-scrollbar-button { /* 滚动条两端的按钮 */
width: 0;
height: 0;
background-color: transparent;
}
// ::-webkit-scrollbar:horizontal针对横向滚动条，为了方便鼠标拖动，如果也设置为0，不好控制
.no-page-table ::-webkit-scrollbar:horizontal,
.right-content ::-webkit-scrollbar:horizontal {
height:6px;
margin-bottom:2px
}
.no-page-table ::-webkit-scrollbar-track,
.right-content ::-webkit-scrollbar-track { /* 外层轨道 */
box-shadow: inset 0 0 5px transparent;
border-radius: 0;
background: transparent;
}
.no-page-table ::-webkit-scrollbar-track-piece,
.right-content ::-webkit-scrollbar-track-piece { /*内层轨道，滚动条中间部分 */
background-color: transparent;
border-radius: 2px;
}
.no-page-table ::-webkit-scrollbar-thumb,
.right-content ::-webkit-scrollbar-thumb{ /* 滑块 */
/* width:1px;
border-radius: 5px;
background: #CBCBCB; */
/*滚动条里面小方块*/
border-radius: 5px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.2);
}
.no-page-table ::-webkit-scrollbar-corner,
.right-content ::-webkit-scrollbar-corner { /* 边角 */
width: 0;
background-color: transparent;
}
.no-page-table ::-webkit-scrollbar-thumb:hover,
.right-content ::-webkit-scrollbar-thumb:hover { /* 鼠标移入滑块 */
background: #909090;
}
|
如果要自定义设置其他样式，可根据上面的属性进行自定义设置
如果设置滚动条宽度为0，可简略写：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| /* 火狐浏览器 */
.dashboard-container,
.no-page-table .layui-table-main{
scrollbar-width:none; // 这个值要设置给真实滚动内容的盒子，直接给html，不会全部生效
}
// scrollbar-width的设置元素与谷歌浏览器::-webkit-scrollbar设置的元素可能不一样，要针对实际情况设置
/* 滚动条整体部分 */
.no-page-table ::-webkit-scrollbar,
.right-content ::-webkit-scrollbar{
width: 0;
}
/* 滚动条两端的按钮 */
.no-page-table ::-webkit-scrollbar-button,
.right-content ::-webkit-scrollbar-button {
width: 0;
height: 0;
background-color: transparent;
}
/* 横向滚动条 */
.no-page-table ::-webkit-scrollbar:horizontal,
.right-content ::-webkit-scrollbar:horizontal {
height:6px;
}
|
Custom CSS Scrollbar for Firefox
Custom scrollbars
Custom CSS Scrollbar for Firefox
scrollbar-color
如何用CSS修改浏览器滚动条的样式
浏览器滚动条样式修改
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| ::-webkit-scrollbar { /* 滚动条整体部分 */
width:10px;
margin-right:2px
}
::-webkit-scrollbar-button { /* 滚动条两端的按钮 */
width:10px;
background-color: yellow;
}
::-webkit-scrollbar:horizontal {
height:10px;
margin-bottom:2px
}
::-webkit-scrollbar-track { /* 外层轨道 */
border-radius: 10px;
}
::-webkit-scrollbar-track-piece { /*内层轨道，滚动条中间部分 */
background-color: #333333;
border-radius: 10px;
}
::-webkit-scrollbar-thumb { /* 滑块 */
width:10px;
border-radius: 5px;
background: #CBCBCB;
}
::-webkit-scrollbar-corner { /* 边角 */
width: 10px;
background-color: red;
}
::-webkit-scrollbar-thumb:hover { /* 鼠标移入滑块 */
background: #909090;
}
|
CSS设置滚动条样式
监听滚动条事件
.scroll
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| //监听内容区的滚动事件
$(".dashboard-container").scroll(function() {
var timer = null;
clearTimeout(timer);
timer = setTimeout(function(){
var hourDataTop = $("#hourData").offset().top;
var viewWidth = window.innerWidth;
var viewHeight = window.innerHeight;
// 内容滚动高度
var sctop = $(".dashboard-container").scrollTop();
var isPC = IsPC(); // 是否PC端
var isHorizontal = viewWidth > viewHeight; // 是否横屏
// alert(isHorizontal);
var detailTablePos = isPC ? 153 : (isHorizontal ? 253 : 480);
var hourDataPos = isPC ? 90 : (isHorizontal ? 140 : 140);
if(sctop >= detailTablePos) {
// 相关操作
}
else{
// 相关操作
}
},150);
});
|
控制滚动条滚动到某个位置
1
2
3
4
| document.getElementById('scrollBox').scrollTop = $(el).offset().top;
scrollBox：滚动的盒子的id
$(el).offset().top: 元素的位置
|
