【css】css自定义div的滚动条宽度

需要通过对应浏览器的伪元素来修改：

点击这里查看：主流浏览器对应伪元素简介链接地址！

示例代码（针对google类webkit内核浏览器）：

<div class="scrollDiv"></div>
1

.scrollDiv {
  max-height: 300px;
  overflow-y: scroll;
}
1
2
3
4

css写法

.scrollDiv::-webkit-scrollbar {
  width: 4px;
}
.scrollDiv::-webkit-scrollbar-thumb {
  background-color: #d9d9d9;
}

1
2
3
4
5
6
7

less写法

.scrollDiv {
  &::-webkit-scrollbar {
	width: 4px;
  }
  &::-webkit-scrollbar-thumb {
	background-color: #d9d9d9;
  }
}

1
2
3
4
5
6
7
8
9