设置滚动条样式

Posted on | Post modified: | In
Words count in article: 352 | Reading time ≈ 1

不使用插件，通过CSS设置滚动条样式。

你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式：

  • ::-webkit-scrollbar — 整个滚动条.
  • ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
  • ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
  • ::-webkit-scrollbar-track — 滚动条轨道.
  • ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
  • ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
  • ::-webkit-resizer — 某些元素的corner部分的部分样式(如:textarea的可拖动按钮).

    设置浏览器滚动条

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 滚动条凹槽的颜色，还可以设置边框属性
::-webkit-scrollbar-track-piece {
  background-color: #f8f8f8;
}
// 滚动条的宽度
::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
// 滚动条的滑块
::-webkit-scrollbar-thumb {
  background-color: #ddd;
  background-clip: padding-box;
  min-height: 30px;
}
::-webkit-scrollbar-thumb:hover {
	background-color: #bbb;
}

设置div滚动条

1
<div class="scroll"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
.scroll::-webkit-scrollbar {
	width: 8px;
}
.scroll::-webkit-scrollbar-track {
  background-color: orange;
  -webkit-border-radius: 2em;
  border-radius: 2em;
}
.scroll::-webkit-scrollbar-thumb {
  background-color: green;
  -webkit-border-radius: 2em;
  border-radius: 2em;
}

使用jQuery控制滚动条

1
2
$(this).animate({ scrollTop: "+=50" }, 1000); // 竖直
$(this).animate({ scrollLeft: "+=50" }, 1000); // 水平

参数说明：

$(this)表示要滚动的对象，-=50表示向上（左）滚动50px ， +=50表示向下（右）滚动50px ，1000表示滚动速度，可能的值：毫秒、”slow”、”fast”。