创建网站做搞笑视频做网上夫妻去哪个网站
title: 滚动条样式
date: 2025-05-07 19:59:31
tags:css
滚动条样式完整定义 HTML 示例
以下是一个包含所有主流浏览器滚动条样式属性的完整HTML文件，涵盖了WebKit内核浏览器和Firefox的滚动条定制：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>滚动条样式完整定义</title><style>/* 基础样式 */body {font-family: Arial, sans-serif;line-height: 1.6;padding: 20px;background-color: #f5f5f5;}h1 {color: #333;margin-bottom: 30px;text-align: center;}.container {max-width: 800px;margin: 0 auto;}.scroll-section {background: white;border-radius: 8px;padding: 20px;margin-bottom: 30px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);}/* 1. WebKit浏览器滚动条样式 (Chrome, Safari, Edge) */.webkit-scrollbar {height: 300px;overflow-y: scroll;padding: 15px;border: 1px solid #ddd;}/* 整个滚动条 */.webkit-scrollbar::-webkit-scrollbar {width: 16px; /* 垂直滚动条宽度 */height: 16px; /* 水平滚动条高度 */}/* 滚动条轨道 */.webkit-scrollbar::-webkit-scrollbar-track {background-color: #f1f1f1; /* 轨道背景色 */border-radius: 8px;border: 3px solid white; /* 轨道边框 */}/* 滚动条滑块 */.webkit-scrollbar::-webkit-scrollbar-thumb {background-color: #a0a0a0; /* 滑块颜色 */border-radius: 8px;border: 3px solid #f1f1f1; /* 滑块边框 */background-clip: padding-box; /* 防止背景色溢出到边框 */}/* 滑块悬停状态 */.webkit-scrollbar::-webkit-scrollbar-thumb:hover {background-color: #808080; /* 悬停时滑块颜色 */}/* 滚动条按钮（上下箭头） */.webkit-scrollbar::-webkit-scrollbar-button {display: block; /* 显示按钮 */height: 4px;background-color: #d1d1d1;background-repeat: no-repeat;background-position: center;}/* 垂直滚动条向上按钮 */.webkit-scrollbar::-webkit-scrollbar-button:vertical:decrement {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666'%3E%3Cpath d='M7 14l5-5 5 5z'/%3E%3C/svg%3E");}/* 垂直滚动条向下按钮 */.webkit-scrollbar::-webkit-scrollbar-button:vertical:increment {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");}/* 滚动条角落（水平和垂直滚动条交汇处） */.webkit-scrollbar::-webkit-scrollbar-corner {background-color: #f1f1f1;}/* 2. Firefox浏览器滚动条样式 */.firefox-scrollbar {height: 300px;overflow-y: scroll;padding: 15px;border: 1px solid #ddd;scrollbar-width: auto; /* auto | thin | none */scrollbar-color: #a0a0a0 #f1f1f1; /* 滑块颜色 轨道颜色 */}/* 3. 全局滚动条样式 */body::-webkit-scrollbar {width: 12px;}body::-webkit-scrollbar-track {background: #f8f8f8;}body::-webkit-scrollbar-thumb {background: #c1c1c1;border-radius: 6px;border: 2px solid #f8f8f8;}body {scrollbar-width: thin;scrollbar-color: #c1c1c1 #f8f8f8;}/* 4. 水平滚动条样式示例 */.horizontal-scroll {width: 100%;overflow-x: auto;white-space: nowrap;padding: 15px;border: 1px solid #ddd;}.horizontal-scroll::-webkit-scrollbar {height: 12px;}.horizontal-scroll::-webkit-scrollbar-thumb {background: linear-gradient(90deg, #ff8a00, #da1b60);}/* 5. 高级滚动条效果 */.advanced-scrollbar {height: 300px;overflow-y: scroll;padding: 15px;border: 1px solid #ddd;}.advanced-scrollbar::-webkit-scrollbar {width: 14px;}.advanced-scrollbar::-webkit-scrollbar-track {background: linear-gradient(to bottom, #f5f5f5, #e5e5e5);border-radius: 7px;}.advanced-scrollbar::-webkit-scrollbar-thumb {background: linear-gradient(to bottom, #6e48aa, #9d50bb);border-radius: 7px;box-shadow: inset 0 0 6px rgba(0,0,0,0.3);}/* 滚动条内容样式 */.scroll-content {height: 800px;padding: 10px;background: linear-gradient(to bottom, #ffffff, #f9f9f9);}.scroll-item {padding: 15px;margin-bottom: 10px;background: #e9f7fe;border-radius: 4px;}</style>
</head>
<body><div class="container"><h1>滚动条样式完整定义</h1><div class="scroll-section"><h2>1. WebKit浏览器滚动条样式</h2><div class="webkit-scrollbar"><div class="scroll-content"><div class="scroll-item">项目 1</div><div class="scroll-item">项目 2</div><div class="scroll-item">项目 3</div><div class="scroll-item">项目 4</div><div class="scroll-item">项目 5</div><div class="scroll-item">项目 6</div><div class="scroll-item">项目 7</div><div class="scroll-item">项目 8</div><div class="scroll-item">项目 9</div><div class="scroll-item">项目 10</div></div></div></div><div class="scroll-section"><h2>2. Firefox浏览器滚动条样式</h2><div class="firefox-scrollbar"><div class="scroll-content"><div class="scroll-item">项目 A</div><div class="scroll-item">项目 B</div><div class="scroll-item">项目 C</div><div class="scroll-item">项目 D</div><div class="scroll-item">项目 E</div><div class="scroll-item">项目 F</div><div class="scroll-item">项目 G</div><div class="scroll-item">项目 H</div><div class="scroll-item">项目 I</div><div class="scroll-item">项目 J</div></div></div></div><div class="scroll-section"><h2>3. 水平滚动条样式</h2><div class="horizontal-scroll"><div style="display: inline-block; width: 1200px; padding: 10px; background: #f0f0f0;"><div style="display: inline-block; width: 200px; height: 100px; margin-right: 10px; background: #d1e7ff; padding: 10px;">水平项目 1</div><div style="display: inline-block; width: 200px; height: 100px; margin-right: 10px; background: #d1e7ff; padding: 10px;">水平项目 2</div><div style="display: inline-block; width: 200px; height: 100px; margin-right: 10px; background: #d1e7ff; padding: 10px;">水平项目 3</div><div style="display: inline-block; width: 200px; height: 100px; margin-right: 10px; background: #d1e7ff; padding: 10px;">水平项目 4</div><div style="display: inline-block; width: 200px; height: 100px; margin-right: 10px; background: #d1e7ff; padding: 10px;">水平项目 5</div><div style="display: inline-block; width: 200px; height: 100px; margin-right: 10px; background: #d1e7ff; padding: 10px;">水平项目 6</div></div></div></div><div class="scroll-section"><h2>4. 高级滚动条效果</h2><div class="advanced-scrollbar"><div class="scroll-content"><div class="scroll-item">高级项目 一</div><div class="scroll-item">高级项目 二</div><div class="scroll-item">高级项目 三</div><div class="scroll-item">高级项目 四</div><div class="scroll-item">高级项目 五</div><div class="scroll-item">高级项目 六</div><div class="scroll-item">高级项目 七</div><div class="scroll-item">高级项目 八</div><div class="scroll-item">高级项目 九</div><div class="scroll-item">高级项目 十</div></div></div></div></div>
</body>
</html>
包含的所有滚动条样式属性
WebKit浏览器 (Chrome, Safari, Edge等)
-
::-webkit-scrollbar- 整个滚动条width- 垂直滚动条宽度height- 水平滚动条高度
-
::-webkit-scrollbar-track- 滚动条轨道background-color- 轨道背景色border-radius- 轨道圆角border- 轨道边框
-
::-webkit-scrollbar-thumb- 滚动条滑块background-color- 滑块颜色border-radius- 滑块圆角border- 滑块边框background-clip- 背景裁剪方式:hover状态样式
-
::-webkit-scrollbar-button- 滚动条按钮(箭头):vertical:decrement- 垂直向上按钮:vertical:increment- 垂直向下按钮
-
::-webkit-scrollbar-corner- 滚动条角落
Firefox浏览器
-
scrollbar-width- 滚动条宽度auto- 默认宽度thin- 较窄的滚动条none- 隐藏滚动条
-
scrollbar-color- 滚动条颜色- 第一个值: 滑块颜色
- 第二个值: 轨道颜色
通用属性
-
overflow- 控制溢出行为auto- 自动显示滚动条scroll- 总是显示滚动条
-
滚动条美化技巧
- 渐变背景
- 阴影效果
- 动态宽度变化
- 自定义箭头图标
这个示例涵盖了所有主流浏览器中可用的滚动条样式属性，您可以直接使用或根据需要修改其中的样式定义。