核心概念：overflow 属性

所有滚动条的控制都源于 CSS 的 overflow 属性，它定义了当一个元素的内容溢出其块级格式化上下文时,应该如何处理。

overflow 属性的主要值：

  • visible (默认值): 内容不会被修剪,会呈现在元素框之外。
  • hidden: 内容会被修剪,并且其余内容是不可见的。
  • scroll: 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
  • auto: 如果内容被修剪，浏览器会显示滚动条以便查看其余的内容。这是最常用的值,因为它只在需要时才显示滚动条。
  • overflow-x 和 overflow-y: 分别控制水平（左右）和垂直（上下）方向的溢出处理。

隐藏默认滚动条

有时，为了美观或设计需求，我们希望隐藏滚动条,但保留滚动功能。

隐藏整个页面的滚动条

适用场景： 单页应用、全屏网站。

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">隐藏页面滚动条</title>
    <style>
        /* 针对主流浏览器隐藏滚动条 */
        html {
            /* 隐藏默认滚动条 */
            overflow: -moz-scrollbars-none; /* Firefox */
            scrollbar-width: none; /* Firefox */
        }
        body {
            /* 隐藏默认滚动条 */
            overflow-y: scroll; /* 确保页面可以垂直滚动 */
            overflow-x: hidden; /* 隐藏水平滚动条 */
            /* 针对IE和Edge隐藏滚动条 */
            -ms-overflow-style: none; /* IE 10+ */
        }
        /* 针对Webkit内核浏览器 (Chrome, Safari, Opera) 隐藏滚动条 */
        body::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
        }
        /* 为了演示，添加一些高度 */
        body {
            height: 200vh; /* 使页面高度超过视口，产生垂直滚动条 */
            width: 200vw;  /* 使页面宽度超过视口，产生水平滚动条 */
        }
    </style>
</head>
<body>
    <h1>向下或向右滚动试试</h1>
    <p>虽然滚动条被隐藏了，但你仍然可以使用鼠标滚轮、触摸板或方向键来滚动页面。</p>
</body>
</html>

代码解释：

  • overflow: hidden; 会直接禁用滚动,所以这里不使用。
  • 我们使用 :-webkit-scrollbar 伪元素来隐藏 Webkit 内核浏览器的滚动条。
  • 使用 -ms-overflow-style: none; 来隐藏 IE 和 Edge 的滚动条。
  • 使用 scrollbar-width: none; 来隐藏 Firefox 的滚动条。
  • overflow-y: scroll; 确保了垂直滚动功能的存在。

创建自定义滚动条

这是更高级和美观的做法，通过 CSS 重新设计滚动条的样式。

自定义整个页面的滚动条

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">自定义页面滚动条</title>
    <style>
        /* 基础样式，让页面有足够空间滚动 */
        body {
            height: 200vh;
            width: 200vw;
            font-family: sans-serif;
        }
        /* --- 1. 自定义垂直滚动条 (Webkit内核) --- */
        body::-webkit-scrollbar {
            width: 12px; /* 滚动条宽度 */
        }
        body::-webkit-scrollbar-track {
            background: #f1f1f1; /* 滚动条轨道背景 */
            border-radius: 10px;
        }
        body::-webkit-scrollbar-thumb {
            background: #888; /* 滚动条滑块颜色 */
            border-radius: 10px;
        }
        body::-webkit-scrollbar-thumb:hover {
            background: #555; /* 鼠标悬停时滑块颜色 */
        }
        /* --- 2. 自定义水平滚动条 (Webkit内核) --- */
        body::-webkit-scrollbar-horizontal {
            height: 12px; /* 滚动条高度 */
        }
        body::-webkit-scrollbar-corner {
            background: #f1f1f1; /* 滚动条角落背景 */
        }
    </style>
</head>
<body>
    <h1>自定义滚动条演示</h1>
    <p>向下或向右滚动，看看滚动条的变化。</p>
</body>
</html>

代码解释：

  • :-webkit-scrollbar: 整个滚动条的容器。
  • :-webkit-scrollbar-track: 滚动条的轨道（滑块移动的区域）。
  • :-webkit-scrollbar-thumb: 滚动条的滑块（可拖动的部分）。
  • :-webkit-scrollbar-button: 滚动条两端的按钮（上下/左右）。
  • :-webkit-scrollbar-corner: 当同时存在水平和垂直滚动条时,角落的区域。

注意： :-webkit-scrollbar 相关的样式只对基于 Webkit 的浏览器（如 Chrome, Safari, Opera）有效，Firefox 和 Edge 虽然也支持部分自定义,但语法不同。

兼容 Firefox 和 Edge 的自定义滚动条

Firefox 和 Edge 对自定义滚动条的支持相对有限，Firefox 主要支持 scrollbar-width 和 scrollbar-color。

/* Firefox 自定义滚动条颜色 */
html {
    scrollbar-width: thin; /* 可以是 'auto', 'thin', 'none' */
    scrollbar-color: #888 #f1f1f1; /* 滑块颜色, 轨道颜色 */
}

如果需要完美的跨浏览器自定义滚动条，目前最可靠的方案仍然是使用 JavaScript 插件，如 Perfect Scrollbar 或 OverlayScrollbars，它们会用一个完全自定义的 <div> 元素来模拟滚动条,从而实现全平台一致的样式。

为特定元素添加滚动条

这是最常见的需求，比如在一个固定大小的 div 容器内显示超出内容。

固定高度/宽度的容器，内部内容可滚动

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">为特定元素添加滚动条</title>
    <style>
        .container {
            width: 300px;
            height: 200px;
            border: 2px solid #333;
            padding: 10px;
            /* --- 关键代码 --- */
            overflow-y: auto; /* 垂直方向出现滚动条 */
            overflow-x: hidden; /* 水平方向隐藏滚动条 */
            /* 可选：自定义这个容器的滚动条 */
            /* 注意：这里只对 Webkit 内核浏览器有效 */
        }
        .container::-webkit-scrollbar {
            width: 8px;
        }
        .container::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }
        .container::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }
        .content {
            /* 让内容足够长，以产生滚动条 */
            height: 500px; 
            background: linear-gradient(to bottom, #ffcccb, #add8e6);
            text-align: center;
            line-height: 200px;
            color: white;
        }
    </style>
</head>
<body>
    <h2>这是一个固定高度的滚动容器</h2>
    <div class="container">
        <div class="content">
            <p>向下滚动查看更多内容...</p>
        </div>
    </div>
</body>
</html>

代码解释：

  • 我们为 .container 这个 div 设置了固定的 width 和 height。
  • overflow-y: auto; 是关键，它告诉浏览器：.content 的高度超过了 .container 的高度,就在垂直方向显示一个滚动条。
  • overflow-x: hidden; 确保水平方向即使内容溢出,也不会出现滚动条。
  • 之后，我们使用 :-webkit-scrollbar 等伪元素来美化