通过CSS来设置页面滚动条

简介: 通过CSS来设置页面滚动条

大家是否因为滚动条的美观而发愁,下面分享一个简单好用的方法来调节它!

这是没有设置前的样子:

这是设置后的样子:

那么接下来给大家分享代码:

css:

.staff {
  width: 1407px;
  overflow-x: scroll;
}
/* 整个滚动条 */
::-webkit-scrollbar {
  /* 对应纵向滚动条的宽度 */
  width: 8px;
  /* 对应横向滚动条的宽度 */
  height: 8px;
}
/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
  background-color: #C5C7CA;
  border-radius: 32px;
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: #ffffff;
  border-radius: 32px;
}

大家直接复制到代码中区就可以啦!

相关文章
|
1月前
|
前端开发
web前端开发-----CSS样式设置
web前端开发-----CSS样式设置
33 0
|
1月前
|
Web App开发 前端开发 JavaScript
编程笔记 html5&css&js 004 我的第一个页面
编程笔记 html5&css&js 004 我的第一个页面
|
3月前
|
前端开发
|
10天前
|
前端开发
css怎样设置下滑线?
css怎样设置下滑线?
|
20天前
|
移动开发 前端开发
【通用CSS模板】移动端H5页面统一样式.css
【通用CSS模板】移动端H5页面统一样式.css
|
21天前
CSS3设置圆角化
CSS3设置圆角化
|
2月前
|
前端开发 开发者
深入了解 CSS 伪类:优化页面样式与交互
深入了解 CSS 伪类:优化页面样式与交互
60 2
|
3月前
|
前端开发
使用CSS实现网格+渐变背景色的Web页面背景
使用CSS实现网格+渐变背景色的Web页面背景
29 0
|
3月前
|
前端开发
让页面里的字体变清晰,变细用CSS怎么做?
让页面里的字体变清晰,变细用CSS怎么做?
48 2
|
3月前
|
前端开发
什么是CSS Sprite,以及如何在页面或网站中使用它
什么是CSS Sprite,以及如何在页面或网站中使用它
27 1