在浏览网站时，发现滚动条时隐时现？

一、CSS 实现方案

1. 基础代码（兼容 WebKit/Blink 内核浏览器）

/* 隐藏滚动条（Chrome/Safari/Edge） */
.scroll-container::-webkit-scrollbar {
    width: 0; /* 垂直滚动条宽度 */
    height: 0; /* 水平滚动条高度 */
}

/* 鼠标移入时显示滚动条 */
.scroll-container:hover::-webkit-scrollbar {
    width: 8px; /* 自定义宽度 */
    height: 8px; /* 自定义高度 */
}

/* 滚动条轨道 */
.scroll-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

/* 滚动条滑块 */
.scroll-container:hover::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

/* 滚动条滑块悬停效果 */
.scroll-container:hover::-webkit-scrollbar-thumb:hover {
    background: #555;
}

2. 兼容 Firefox

.scroll-container {
    scrollbar-width: none; /* Firefox 64+ */
}

.scroll-container:hover {
    scrollbar-width: thin; /* auto | thin | none */
    scrollbar-color: #888 #f1f1f1; /* 滑块颜色 轨道颜色 */
}

3. 完整 HTML 示例

<div class="scroll-container" style="width: 300px; height: 200px; overflow: auto;">
    <div style="width: 600px; height: 400px;">
        <!-- 长内容区域 -->
        <p>这是一个足够长的内容，用于触发滚动条...</p>
    </div>
</div>

4.全局的滚动条

/* 滚动条里面轨道，能向上向下移动 */
::-webkit-scrollbar-track-piece {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    display: none;
    background: #E2E6F1;
}

/* 滚动条里面的小方块，能向上向下移动 */
*:hover::-webkit-scrollbar-thumb {
    display: flex;
    background: #E2E6F1;
}

*:hover::-webkit-scrollbar-track-piece {
    background-color: transparent;
}

二、兼容性说明

三、注意事项

1. 功能保留

   即使隐藏滚动条，仍需保证用户可通过鼠标滚轮或触摸板滚动内容。

2. 视觉提示

   隐藏滚动条可能导致用户不知道内容可滚动，建议通过以下方式提示：

   • 使用渐变遮罩
   • 添加指示箭头
   • 部分截断内容

3. 移动端适配

   移动设备通常依赖触摸滚动，隐藏滚动条可能更合理，但需确保触摸流畅性。

四、备选方案（兼容旧浏览器）

若需支持 IE/旧版 Edge，可使用 JavaScript 库模拟滚动条：

<!-- 使用 simplebar 库 -->
<link href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js"></script>

<div data-simplebar style="width: 300px; height: 200px;">
    <!-- 长内容 -->
</div>

五、最终效果总结

• 现代浏览器：通过 CSS 原生实现平滑的滚动条显隐动画
• 旧浏览器：回退到默认滚动条或使用 JS 库模拟
• 核心逻辑：利用 ::-webkit-scrollbar 控制 WebKit 内核，scrollbar-width 适配 Firefox，JS 库兜底兼容性。