通过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;
}

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

相关文章
|
3天前
|
前端开发
页面无法滑动-CSS: touch-action属性
页面无法滑动-CSS: touch-action属性
20 0
|
3天前
|
前端开发
CSS 滚动条样式修改
CSS 滚动条样式修改
38 0
|
3天前
|
前端开发
web前端开发-----CSS样式设置
web前端开发-----CSS样式设置
35 0
|
3天前
|
Web App开发 前端开发 JavaScript
编程笔记 html5&css&js 004 我的第一个页面
编程笔记 html5&css&js 004 我的第一个页面
|
3天前
|
容器
mui.css 滚动条消失 导致超出部分无法显示 overflow属性
mui.css 滚动条消失 导致超出部分无法显示 overflow属性
10 0
|
3天前
|
UED 开发者 容器
【专栏】Flexbox是CSS3的全新布局模式,提供灵活响应式的页面设计
【4月更文挑战第27天】Flexbox是CSS3的全新布局模式,提供灵活响应式的页面设计。其特点包括灵活性、响应式和易理解,通过主轴和交叉轴控制元素排列对齐。核心概念有容器和项目,常用于导航栏、卡片布局、响应式设计、表格和表单布局。关键属性如flex-direction定义主轴方向,justify-content和align-items控制对齐,flex属性调整项目伸缩,order改变排序。在实践中,要关注响应式、代码维护和浏览器兼容性,以优化布局和用户体验。
|
3天前
|
前端开发 数据安全/隐私保护
利用 HBuilderX 设置CSS样式会员注册页面
利用 HBuilderX 设置CSS样式会员注册页面
11 1
|
3天前
|
前端开发
css设置内嵌样式阴影
css设置内嵌样式阴影
11 0
|
3天前
|
移动开发 前端开发 JavaScript
【专栏:HTML与CSS实战项目篇】使用HTML5与CSS3制作一个动态表单验证页面
【4月更文挑战第30天】本文介绍了使用HTML5和CSS3创建动态表单验证页面的方法。首先,简述HTML5用于构建网页内容,CSS3用于描述样式。接着,分四步展示实现过程:1) 设计包含输入框和提示信息的表单结构;2) 使用CSS3创建样式,增强视觉效果;3) 使用JavaScript监听输入事件,动态验证表单并显示错误信息;4) 测试和调试确保跨平台兼容性。通过学习,开发者能掌握创建带验证功能的表单,提升用户体验。
|
3天前
|
前端开发 测试技术 UED
【专栏:HTML 与 CSS 实战项目篇】实现一个在线产品展示页面
【4月更文挑战第30天】本文介绍了使用HTML和CSS创建吸引人的在线产品展示页面的实战步骤,包括页面设计规划、HTML结构搭建、CSS样式设计、具体页面实现、交互效果添加、优化与提升。通过简洁布局、产品列表和详情页设计,实现易用且具吸引力的展示效果。优化图片和代码,提升性能,以助企业在数字时代脱颖而出。