当前位置：网站首页 > 技术文章 > 正文

网页滚动条样式设置CSS 网页滚动效果怎么做

zhezhongyun 2024-12-26 17:41 65 浏览

网页默认的滚动条不怎么好看，特别是对于网页内部元素使用滚动条时，默认样式就更加显得格格不入。

对于滚动条的样式设置，调整以下一个属性的值即可。

::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的

::-webkit-scrollbar-button 滚动条两端的按钮

::-webkit-scrollbar-track 外层轨道

::-webkit-scrollbar-track-piece 内层滚动槽

::-webkit-scrollbar-thumb 滚动的滑块

::-webkit-scrollbar-corner 边角

::-webkit-resizer 定义右下角拖动块的样式

举个栗子：

<div class="content">
	<div class="contentHeight"></div>
</div>

设置样式：

.content {
	width: 300px;
	height: 300px;
	overflow: hidden;
	overflow-y: scroll;
	background-color: #00FFFF;
	border: 1px solid #000;
}
.contentHeight {
	width: 500px;
	height: 500px;
}

以上样式规定，当内容大于父级框架尺寸时，纵向出现滚动条。

开始对滚动条进行设置：

.content::-webkit-scrollbar {
	/*滚动条整体样式*/
	/*高宽分别对应横竖滚动条的尺寸*/
	height: 50px;
	width: 5px;
}
.content::-webkit-scrollbar-thumb {
	/*滚动条里面小方块*/
	border-radius: 5px;
	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	background: #535353;
}

.content::-webkit-scrollbar-track {
	/*滚动条里面轨道*/
	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	border-radius: 5px;
	background: #fff;
}
.content::-webkit-scrollbar-button{
	width: 6px;
	height: 6px;
	background-color: red;
}

HTML滚动条样式

上一篇：优雅而酷炫的自定义CSS滚动条 css设置滚动条
下一篇：如何实现页面顶部，自定义滚动进度条样式

网页滚动条样式设置CSS 网页滚动效果怎么做

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

接口测试遇到500报错?别慌，你的头部可能有点问题

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）