自定义滚动条@莫成尘

2023-10-27

先看代码，复制使用即可，以下代码均可复制粘贴使用（我将以注释的形式解释代码左右，您将看到以下效果）。原生的滚动条比较方正，不够圆滑，很大程度上不能满足我们的审美，有时候需要修改其样式。

`滚动条的高度将随着内容的多少自适应`

自定义滚动条

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<style type="text/css">
	.Count-box{ //最外层盒子
	  height: 220px;
	  width: 227px;
	  overflow: auto;
	  display: inline-block;  /* 测试效果 使用时请删除  */
	}
	.countSon{ //站位元素
		height: 40px;
		margin: 8px;
		line-height: 40px;
		text-align: center;
	}
	/* 第一个 */
	.Count-box-zero::-webkit-scrollbar {
	  width:6px;
	  height:220px;     
	}
	.Count-box-zero::-webkit-scrollbar-thumb {
	  border-radius: 3px;
	  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
	  background: rgba(0,0,0,0.2);
	}
	.Count-box-zero::-webkit-scrollbar-track {
	  box-shadow: inset 0 0 0px rgba(0,0,0,0.2);
	  border-radius: 0;
	  background: rgba(0,0,0,0.1);
	}
	/* 第二个 */
	.Count-box-one::-webkit-scrollbar {
	  width:6px;
	  height:220px;     
	}
	.Count-box-one::-webkit-scrollbar-thumb {
	  border-radius: 3px;
	  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
	  background: red;
	}
	.Count-box-one::-webkit-scrollbar-track {
	  box-shadow: inset 0 0 0px rgba(0,0,0,0.2);
	  border-radius: 0;
	  background: skyblue;
	}
	/* 第三个  无任何效果 */
</style>
<body>
	<div class="Count-box-zero Count-box">
		<div class="countSon">占位内容</div>
		<div class="countSon">占位内容</div>
		<div class="countSon">占位内容</div>
		<div class="countSon">占位内容</div>
		<div class="countSon">占位内容</div>
		<div class="countSon">占位内容</div>
		<div class="countSon">占位内容</div>
		<div class="countSon">占位内容</div>
		<div class="countSon">占位内容</div>
		<div class="countSon">占位内容</div>
		<div class="countSon">占位内容</div>
	</div>
	<div class="Count-box-one Count-box">
		<div class="countSon">占位内容</div>
		<div class="countSon">占位内容</div>
		<div class="countSon">占位内容</div>
		<div class="countSon">占位内容</div>
		<div class="countSon">占位内容</div>
		<div class="countSon">占位内容</div>
		<div class="countSon">占位内容</div>
		<div class="countSon">占位内容</div>
		<div class="countSon">占位内容</div>
		<div class="countSon">占位内容</div>
		<div class="countSon">占位内容</div>
	</div>
	<div class="Count-box-two Count-box">
		<div class="countSon">占位内容</div>
		<div class="countSon">占位内容</div>
		<div class="countSon">占位内容</div>
		<div class="countSon">占位内容</div>
		<div class="countSon">占位内容</div>
		<div class="countSon">占位内容</div>
		<div class="countSon">占位内容</div>
		<div class="countSon">占位内容</div>
		<div class="countSon">占位内容</div>
		<div class="countSon">占位内容</div>
		<div class="countSon">占位内容</div>
	</div>
</body>
</html>

附加和可能出现的有用信息已添加注释

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

CSS3

自定义滚动条

前端

html

自定义滚动条@莫成尘的相关文章

由于 MIME 类型不受支持，拒绝应用样式

我不断收到一条错误消息指出 MIME 类型 text html 不可执行或不是受支持的样式表 MIME 类型并且启用了严格的 MIME 检查我的链接代码是
html 和 body 元素的高度

我一直在互联网上查找 min height 和 height 属性如何在 body 和 html 元素上工作我在很多地方都看到过下面的代码 html height 100 body min height 100 上面的内容可以与其他一些
将样式添加到 mat-autocomplete 的 mat-option

我有这个 HTML代码在这里 https stackblitz com edit angular mat autocomplete with selected value vx1uqg file src 2Fapp 2Fautocomple
CSS 的波浪形状

我正在尝试使用 CSS 重新创建此图像我不需要重复它这就是我开始的但它只有一条直线 wave position absolute height 70px width 600px background e0efe3 div div 我认
Flexbox 不适用于 iPad 和 Safari [重复]

这个问题在这里已经有答案了我在网站上使用 Flexbox 但它在 iPad Air iPad 3 和 Safari PC 上崩溃设计和代码与此 codepen 类似 http codepen io anon pen xwJzEg htt
如何检测浏览器是否支持自定义元素

我正在查看 Modernizr 它应该有助于功能检测这应该可以帮助确定您的网站是否与给定的 Web 浏览器兼容但我没有看到任何表明我可以使用它来检测自定义 HTML 的内容我们在内容中创建和定义的元素如果不是 Modernizr 我如
如何动态打破 FlexBox 列以开始新列

I have a dynamic list of items containing text placed column wise which I need to break after every 5th item 我只有两个限制每个
在html表格的每一行添加点击功能

我最近创建了一个函数它根据用户在网站中的输入进行一些复杂的名称匹配并将结果作为表格格式的 html 文件返回我的问题是如何在每一行添加点击功能 df get cust info returns a pandas dataframe d
禁用引导列上的滚动

我正在尝试禁用引导列上的滚动这是我的代码 div class container fluid h 100 div class row h 100 div class col 4 h 100 bg dark fixed div div cl
如何将 Google Charts 与 Vue.js 库一起使用？

我正在尝试使用 Vue js 库使用 Google Charts 制作图表但我不知道如何添加到 div 这是我尝试做的这是如何使用普通 javascript 添加图表这是文档的代码示例 https developers google
表单计算器脚本基本价格未加载 OnLoad

我的表单中有一个计算器来计算我的下拉选项选择 function select calculate on change calc input type checkbox calculate on click calc function cal
Iframe 相对路径挑战

我有一个页面在页面内有一个 Iframe 目录如下 Folder1 Folder2 IframeCSS IframeCSS Css iframePage1 html stuff css parentPage1 html 在 iframeP
提交表单并重定向页面

我在 SO 上看到了很多与此相关的其他问题但没有一个对我有用我正在尝试提交POST表单然后将用户重定向到另一个页面但我无法同时实现这两种情况我可以获取重定向或帖子但不能同时获取两者这是我现在所拥有的
现在 CSS3 供应商前缀有多必要？ [复制]

这个问题在这里已经有答案了我只是想知道现在在 CSS 中指定 webkit moz ms 或 o 等供应商前缀在多大程度上仍然有必要如果我理解正确的话 opera 切换到了 webkit 所以会删除 o 对吗 IE 在 IE10 中不再
如何阻止破折号自行包裹？

我有一个标题标题最后一个单词的末尾是一个破折号单词和破折号之间没有空格当浏览器窗口变小时破折号会中断并换成新行在自己的行上有一个破折号是不好的排版如何停止破折号之前的换行以便最后一个单词运行到新行这是代码 h1 XYZ co
避免响应式页面的重复内容

我目前正在做一个涉及响应式设计的项目整个布局应该使用HTML和CSS来实现我知道可以使用 java 脚本将内容从一个列布局移动到另一列布局而无需复制内容但是使用 HTML 和 CSS 是否可以实现相同的效果以下面的例子为例它会在
FireFox 中的自动滚动

我的应用程序是实时聊天我有一个 Div 来包装消息每条消息都是一个 div 所以在几条消息之后我的 DOM 看起来像这样 div div Message number two div div div div
如何仅在最后一个
处给出透明六边形角度？

我必须制作这样的菜单替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png
带有相对路径的 LESS CSS 背景

我在使用 LESS 作为我的网站的样式表时遇到了问题就我个人而言我宁愿在CSS中使用相对路径而不是绝对路径这只是我的习惯但是现在当我使用带有导入功能的LESS时我遇到了如下所示的问题我有一个main less根文件夹中的文件 i
使用

自定义滚动条@莫成尘

先看代码，复制使用即可，以下代码均可复制粘贴使用（我将以注释的形式解释代码左右，您将看到以下效果）。原生的滚动条比较方正，不够圆滑，很大程度上不能满足我们的审美，有时候需要修改其样式。

滚动条的高度将随着内容的多少自适应

附加和可能出现的有用信息已添加注释

自定义滚动条@莫成尘 的相关文章

`滚动条的高度将随着内容的多少自适应`

自定义滚动条@莫成尘的相关文章