修改浏览器默认滚动条

作为一个有理想的程序员, 页面好看与否直接决定了你是不是一个合格的前端, 而作为页面一部分 -- 滚动条, 直接影响了页面的美观

那么如何修改滚动条的样式呢? 要么使用 js(代表者 - jQuery), 要么使用 css

关于 jQuery 滚动条插件网上一大堆, 就不介绍了

下面重点介绍通过 css 来修改原生滚动条样式

# 修改默认滚动条样式

注:

以下特性是非标准的，请尽量不要在生产环境中使用它！--MDN

@theme_main: #409eff;
@scroll_bg: transparent;
@scroll_width: 6px;

body,
html {
  height: 100%;
  /* 三角箭头的颜色 transparent 无效 */
  scrollbar-arrow-color: rgba(244, 244, 244, 0.1);
  /* 立体滚动条的颜色  */
  scrollbar-face-color: fade(@theme_main, 50%);
  /* 立体滚动条亮边的颜色 */
  scrollbar-3dlight-color: @scroll_bg;
  /* 滚动条空白部分的颜色   */
  scrollbar-highlight-color: @scroll_bg;
  /* 立体滚动条阴影的颜色 */
  scrollbar-shadow-color: @scroll_bg;
  /* 立体滚动条强阴影的颜色 */
  scrollbar-darkshadow-color: @scroll_bg;
  /* 立体滚动条背景颜色 */
  scrollbar-track-color: @scroll_bg;
  /* 滚动条的基本色 */
  scrollbar-base-color: @scroll_bg;
  /* 滚动条自动隐藏 */
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

/* 整个滚动条 */
::-webkit-scrollbar {
  width: @scroll_width;
  height: @scroll_width;
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 @scroll_width @scroll_bg;
  box-shadow: inset 0 0 @scroll_width @scroll_bg;
  -webkit-border-radius: @scroll_width;
  border-radius: @scroll_width;
}
/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
  background: fade(@theme_main, 50%);
  border-radius: @scroll_width;
  .enable-trans();
  &:hover {
    background: fade(@theme_main, 80%);
  }
}
/* 滚动条上的按钮 (上下箭头) */
::-webkit-scrollbar-button {
  display: none;
}
/* 当同时有垂直滚动条和水平滚动条时交汇的部分 */
::-webkit-scrollbar-corner {
  background: @scroll_bg;
}

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
56

# 参考资料

# 隐藏滚动条

CSS 实现隐藏滚动条同时又可以滚动 (opens new window)

编辑

#Css

上次更新: 11/12/2020, 6:27:50 AM

← nth-child 和 nth-of-type 的区别为什么两个宽度为父元素一半的子元素会超出父元素→