css如何让滚动条样式变好看？

林小白的日常

已于 2022-05-16 09:39:02 修改

阅读量2.1k

点赞数 3

分类专栏： css 文章标签： html5 javascript 前端

于 2021-11-30 10:46:58 首次发布

本文链接：https://blog.csdn.net/weixin_51609337/article/details/121626124

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSS来改变网页默认滚动条的样式，使其更加美观。通过设置`::-webkit-scrollbar`及相关伪元素，可以调整滚动条的宽度、颜色和形状。此外，还展示了如何在鼠标悬停时显示滚动条，以及如何隐藏滚动条以优化布局。文章提供了具体的代码示例和实现效果。

摘要由CSDN通过智能技术生成

默认滚动条样式比较丑，长这样：

如何让它变好看呢？可以通过css修改它的样式。

一、默认样式

页面代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div,p,html,body{
				margin: 0;
				padding: 0;
			}
			.content{
				width: 100vw;
				height: 100vh;
				background-color: #000000;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			section{
				width: 300px;
				height: 200px;
				padding: 10px;
				border: 2px solid #DCDCDC;
				border-radius: 5px;
			}
			section .area{
				height: 100%;
				color: #F0F8FF;
				overflow: auto;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<section>
				<div class="area">
					2021年中国金鸡百花电影节将于12月28日-30日在福建省厦门市举办。届时，将举办2021年
					中国金鸡百花电影节开幕式暨第34届中国电影金鸡奖提名者表彰仪式、金鸡国产电影展、金
					鸡国际影展和香港经典影片展、金鸡电影论坛及创投大会、第34届中国电影金鸡奖红毯暨颁
					奖典礼等活动。经过初选、初评两个阶段，目前已评选产生了19个奖项的提名名单（具体提
					名名单见相关链接）。《中国医生》《守岛人》《我和我的家乡》《我的姐姐》《革命者》
					《悬崖之上》入围最佳故事片，尹力、张艺谋、黄建新、郑大圣、韩延、路阳将角逐最佳导
					演奖，于和伟、刘烨、张译、易烊千玺、郭晓东竞争“最佳男主角”，刘浩存、刘敏涛、张小
					斐、张子枫中将诞生新的“最佳女主角”。
					今天公布的主视觉海报，源自于第34届中国电影金鸡奖海报设计大赛获奖作品，海报中的雄
					鸡形象呈现五彩变化。其中，中国红昭示建党百年的坚定和炽烈，生态绿映衬和谐发展的生
					机和希望，海天蓝饱含海天一色的清朗和大气，荣耀金彰显电影强国的梦想和使命，古典墨
					散发传统文化的气质和魅力。
				</div>
			</section>
		</div>
	</body>
</html>

二、修改滚动条样式（Chrome、Safari）

css部分，这里的是设置整个页面的滚动条样式，若设置某一元素的滚动条样式，前面加选择器，如

section .area::-webkit-scrollbar{
	width:10px;
	height:10px;
}

/* 设置滚动条整体，宽高 */
::-webkit-scrollbar{
	width:10px;
	height:10px;
}
/* 设置滚动条的轨道 */
::-webkit-scrollbar-track{
	background: #b3b9bc;
	border-radius:2px;
}
/* 设置滚动条里面的小方块 */
::-webkit-scrollbar-thumb{
	background: #0ebfb0;
	border-radius:10px;
}

效果：

三、隐藏滚动条（Chrome、Safari、IE10+、Firefox）

1、Chrome、Safari

::-webkit-scrollbar{
	width: 0 !important;
}

2、Firefox

section .area{
	scrollbar-color: transparent transparent;
   scrollbar-track-color: transparent;
    -ms-scrollbar-track-color: transparent;
}

四、鼠标移入显示滚动条

			/* 设置滚动条隐藏 */
			::-webkit-scrollbar{
			 width: 0px !important;
			}
			/* 鼠标移入显示 */
			section .area:hover::-webkit-scrollbar{
			  width: 10px !important;
			  height: 10px !important;
			}

效果是这样的，鼠标移入前：

鼠标移入后：

会发现文字内容宽度被滚动条占据一部分，效果不好，解决方法：

section .area{
    /* 和滚动条宽度保持一致 */
	padding-right: 10px;
}
section .area:hover{
	padding-right: 0px;
	color: #0EBFB0;
}

林小白的日常

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
css如何让滚动条样式变好看？

默认滚动条样式比较丑，长这样：如何让它变好看呢？可以通过css修改它的样式。一、默认样式页面代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div,p,html,body{ margin: 0; padding: 0; .
复制链接

扫一扫

专栏目录