CSS自定义滚动条（scrollbar-face-color）

最新推荐文章于 2024-09-03 09:59:23 发布

QQ_286115751

最新推荐文章于 2024-09-03 09:59:23 发布

阅读量2.4k

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/qq_35515563/article/details/59110948

版权

CSS-scrollbar-face-color自定义滚动条

因网站需求，或者是页面的美观等特定需求下可以使用自定义滚动条的方式进行设置，下图是当前源码渲染的效果。

源码效果：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>scrollbar-face-color_CSS----hongyy</title>
<style>
div{
	overflow:scroll;
	width:500px;
	height:200px;
	margin-top:20px;
}
/*// 一、必须增加，设置滚动条样式*/
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/*// 二、置底的滑动槽，可以选择不写，默认*/
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ccc;
}

/*//三、滚动条滑块和第一条必须书写，不写的话，无法实现*/
::-webkit-scrollbar-thumb {
  border-radius: 10