【CSS】html滚动条相关

1.滚动条样式

css 复制代码
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
	z-index: 101;
}
::-webkit-scrollbar-thumb {
	border-radius: 5px;
	background: #cecece;
}
::-webkit-scrollbar-track {
	// background: #f5f5f5be;
	background: rgba(33, 85, 163, 0);
}
::-webkit-scrollbar-button {
	display: none;
}
::-webkit-scrollbar-corner {
	display: none;
}

2.垂直滚动条上下留空

css 复制代码
		::-webkit-scrollbar-button:vertical:start:increment {
			display: block;
			height: 30px;
			background-color: transparent;
		}
		::-webkit-scrollbar-button:vertical:end:increment {
			display: block;
			height: 30px;
			background-color: transparent;
		}
相关推荐
bluceli1 天前
CSS容器查询:响应式设计的新范式
前端·css
Bigger2 天前
CSS 这些年都经历了什么?一次看懂 CSS 的演化史
前端·css·前端工程化
anOnion2 天前
构建无障碍组件之Switch Pattern
前端·html·交互设计
大漠_w3cpluscom3 天前
使用 clip-path: shape() 创建 Squircle 形状
前端·css·weui
会员源码网5 天前
告别参数混乱:如何优雅解决方法参数过多导致的可维护性难题
css
Lee川6 天前
现代Web开发中的CSS继承、Flexbox布局与LocalStorage交互:从文档解析到实践应用
前端·css
helloweilei6 天前
CSS进阶: background-clip
css
DeathGhost7 天前
CSS container容器查询
前端·css
不会敲代码17 天前
前端组件化样式隔离实战:React CSS Modules、styled-components 与 Vue scoped 对比
css·vue.js·react.js
Sailing7 天前
🚀 别再乱写 16px 了!CSS 单位体系已经进入“计算时代”,真正的响应式布局
前端·css·面试