当前位置：首页 > news >正文

滚动条样式

news 2025/5/11 10:51:16

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 - 滚动条角落