css设置全局滚动条样式

最新推荐文章于 2024-06-05 09:46:36 发布

你好，快乐小码农

最新推荐文章于 2024-06-05 09:46:36 发布

阅读量2.1k

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_47719287/article/details/123990797

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

前言
一、样式展示
二、使用如下：
总结

前言

今天学习一下当内容超出固定高度或宽度的容器时，设置全局的滚动条的样式

提示：以下是本篇文章正文内容，下面案例可供参考

一、样式展示

在这里插入图片描述

二、使用如下：

1.代码

::-webkit-scrollbar {
	width: 6px;
}
::-webkit-scrollbar-track{
	background: #163361;
	border-radius: 3px;
}
::-webkit-scrollbar-thumb {
	background: #409EFF;
	border-radius: 3px;
}

2.代码讲解

在这里插入图片描述

3. 完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.wrapper{width: 400px;height: 200px;overflow-y: scroll;}
			::-webkit-scrollbar {
				width: 6px;
				height: 6px;
			}
			::-webkit-scrollbar-track{
				background: #163361;
				border-radius: 3px;
			}
			::-webkit-scrollbar-thumb {
				background: #409EFF;
				border-radius: 3px;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<!-- lorem代码填充 -->
			<!-- loremN 生成N个单词 例：lorem10，生成10个单词 -->
			<!-- lorem*N 生成N行句子 例：lorem*10，生成10行句子 -->
			<!-- loremN*M 生成M行句子，每个句子N个单词 -->
			<div>Lorem ipsum dolor sit amet.</div>
			<div>Sequi ratione vitae? Rerum eveniet.</div>
			<div>Consectetur quia facilis debitis dolore.</div>
			<div>Tempore maxime ad quas nam.</div>
			<div>Iure repellat animi eos quae?</div>
			<div>Impedit voluptas minima dicta qui?</div>
			<div>Nihil ipsum voluptatibus vero porro.</div>
			<div>Repudiandae ea quia blanditiis doloribus.</div>
			<div>Culpa sit nam soluta incidunt.</div>
			<div>Enim modi eius omnis fuga!</div>
			<div>Vero autem quos quas vitae.</div>
			<div>Optio vitae molestiae nostrum saepe.</div>
			<div>Quis assumenda adipisci iure suscipit.</div>
			<div>Repudiandae repellendus odit similique labore.</div>
			<div>Quasi temporibus ex maiores dolores!</div>
		</div>
	</body>
</html>