滚动条样式

最新推荐文章于 2025-06-18 11:03:02 发布
最新推荐文章于 2025-06-18 11:03:02 发布
阅读量1k 收藏 14
点赞数 18
CC 4.0 BY-SA版权
分类专栏： # 前端学习总结 文章标签： css 混动条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_55097440/article/details/147773264

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等)

  1. ::-webkit-scrollbar - 整个滚动条

    • width - 垂直滚动条宽度
    • height - 水平滚动条高度

  2. ::-webkit-scrollbar-track - 滚动条轨道

    • background-color - 轨道背景色
    • border-radius - 轨道圆角
    • border - 轨道边框

  3. ::-webkit-scrollbar-thumb - 滚动条滑块

    • background-color - 滑块颜色
    • border-radius - 滑块圆角
    • border - 滑块边框
    • background-clip - 背景裁剪方式
    • :hover 状态样式

  4. ::-webkit-scrollbar-button - 滚动条按钮(箭头)

    • :vertical:decrement - 垂直向上按钮
    • :vertical:increment - 垂直向下按钮

  5. ::-webkit-scrollbar-corner - 滚动条角落

Firefox浏览器

  1. scrollbar-width - 滚动条宽度

    • auto - 默认宽度
    • thin - 较窄的滚动条
    • none - 隐藏滚动条

  2. scrollbar-color - 滚动条颜色

    • 第一个值: 滑块颜色
    • 第二个值: 轨道颜色

通用属性

  1. overflow - 控制溢出行为

    • auto - 自动显示滚动条
    • scroll - 总是显示滚动条

  2. 滚动条美化技巧

    • 渐变背景
    • 阴影效果
    • 动态宽度变化
    • 自定义箭头图标

这个示例涵盖了所有主流浏览器中可用的滚动条样式属性，您可以直接使用或根据需要修改其中的样式定义。

滚动条样式修改
coder_jxd的博客
04-16 3万+
浏览器中的滚动条样式大家一定都不陌生，其样式并不好康。可能很多小伙伴还不知道，这个东东的样式也可以修改（仅支持部分现代浏览器），本次就来带大家用 CSS 修改一下它的样式。
滚动条基本样式设置
神膘护体小月半的博客
12-26 9221
滚动条基本样式设置
滚动条如何设置样式和滚动条悬浮显示与隐藏
weixin_44784401的博客
04-13 2万+
滚动条如何设置样式和滚动条悬浮显示与隐藏
css滚动条样式指南
qq_42880714的博客
08-01 1万+
css滚动条样式指南
HTML滚动条教程
最新发布
wscfan的博客
06-18 599
滚动条虽然是一个小的UI元素，但对用户体验有重要影响。通过合理的样式设计，可以让滚动条与整体设计风格保持一致，同时确保良好的可用性和可访问性。
修改webkit内核浏览器滚动条样式（修改element-ui table样式）
冰雪为融的博客
04-07 3618
webkit浏览器css设置滚动条主要有下面7个属性 1. ::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的 2. ::-webkit-scrollbar-button 滚动条两端的按钮 3. ::-webkit-scrollbar-track 外层轨道 4. ::-webkit-scrollbar-track-piece 内层滚动槽 5. ::-webkit-scrollbar-thumb 滚动的滑块 6. ::-webkit-scrollbar-corner 边..
CSS自定义浏览器滚动条样式指南
qq_58438037的博客
10-29 6601
在现代网页设计中，细节的优化能够显著提升用户体验。本文详细介绍了如何使用CSS自定义浏览器滚动条的样式，以增强网站的视觉效果。
vue中改变滚动条样式的方法
10-15
vuescroll是一个轻量级且功能强大的Vue滚动组件，它可以提供自定义滚动条样式、平滑滚动、滚动监听等功能。 1. **安装vuescroll**：首先，你需要通过npm安装vuescroll库： ```bash npm install vuescroll ``` ...
Qt悬浮滚动条-滚动条样式
11-20
在“Qt悬浮滚动条-滚动条样式”这个主题中，我们主要探讨如何创建一个不占用控件实际宽高的滚动条，同时增强其视觉效果和交互体验。 首先，让我们了解滚动条的基本概念。Qt中的QScrollBar类提供了水平和垂直滚动条...
好看的滚动条样式
04-07
标题中的“好看的滚动条样式”指的是在网页设计中对浏览器默认滚动条进行美化和定制的一种技术。滚动条作为用户浏览长内容时不可或缺的交互元素，其样式和用户体验往往被开发者忽视，但通过自定义，可以提升网站的...
自定义recyclerView的滚动条样式
12-13
默认情况下，RecyclerView具有一个标准的滚动条样式，但根据应用设计的需求，我们往往需要对其进行自定义以提升用户体验和视觉效果。本文将深入探讨如何自定义RecyclerView的滚动条样式，包括颜色、大小以及与顶部和...
js 自定义滚动条样式
05-17
js 自定义滚动条样式 颜色大小在css调节 绑定节点在js代码第一个函数修改
HTML中滚动条各种样式示例
11-24
HTML中滚动条样式。
关于 overflow 滚动条(滑动条)配置，简单使用的案例和案例代码
youyudehan的博客
01-19 4022
简单了解关于滚动条(滑动条)的样式配置，了解其配置的注意事项，完成实现简单的样式配置实例。
css修改滚动条的样式
热门推荐
yolo_link的博客
07-25 2万+
再加上贴边的宽度，对于内容本身就比较窄的区域来说，这种样式笨重感十足！less模式下，如何更改定义好的颜色变量的透明度呢？大灰块做背景，内嵌小灰块做滚动距离的展示。而像这种样式的滚动条就比较可以了。有滚动条的容器滚动条属性{}fade(颜色变量，透明百分比)就可以在里面设置对应的样式了。这样就可以啦，快去试试吧。上面是滚动条相关的属性。......
滚动条详解：跨平台iOS、Android、小程序滚动条隐藏及自定义样式综合指南
JINGWHALE
04-21 4344
随着用户界面体验提升的要求，滚动条自定义样式以及滚动条隐藏精致化的需求日渐增加，本文详细介绍了小程序、iOS、Android平台滚动条的隐藏方法，以及滚动条一般自定义样式的方法。在保持界面整洁、避免内容溢出的同时，确保用户能够访问所有信息，提升浏览体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值