滚动条不出现需先设置overflow；webkit浏览器用::-webkit-scrollbar定制；firefox/edge无原生方案，需js模拟；grid子项滚动须设固定高或min-height:0。
滚动条不出现？先检查 overflow 和 display 类型
CSS Grid 容器默认不会自动触发滚动，哪怕子项溢出。关键不是“网格多长”，而是父容器是否具备可滚动的条件。
- 必须显式设置
overflow-y: auto或overflow-y: scroll（后者强制显示滚动条轨道） -
display: grid本身不改变溢出行为，它和display: block一样依赖父容器尺寸约束 - 常见错误：只给 grid 容器设了
height: 300px，但没加overflow，结果内容直接撑开容器、滚动条消失
如果用的是 grid-template-rows: 1fr 这类弹性行高，更要确保其父级有明确高度（比如 height: 100vh），否则 1fr 无参照，overflow 失效。
WebKit 浏览器（Chrome/Safari）怎么改滚动条样式？
只有 WebKit 内核支持 ::-webkit-scrollbar 系列伪元素，Firefox 和 Edge（新版）都不认——这点必须提前确认兼容需求。
- 只能作用于“有滚动行为”的元素，即已设置
overflow且实际发生溢出的容器 - 样式必须写在该容器的选择器下，不能提级到 body 或全局
- 最小可用组合是：
::-webkit-scrollbar（整体轨道）、::-webkit-scrollbar-thumb（滑块）
.grid-container {
overflow-y: auto;
height: 400px;
}
<p>.grid-container::-webkit-scrollbar {
width: 8px;
}</p><p>.grid-container::-webkit-scrollbar-thumb {
background-color: #6c5ce7;
border-radius: 4px;
}注意：::-webkit-scrollbar-track 默认透明，若想加背景色，得手动设 background，否则滑块会“看不见”。
立即学习“前端免费学习笔记（深入）”；
触发式加载精美特效企业网站源码使用jquery实现了很多精美的触发式加载特效，网站首页在随着访客的滚动条滚动过程中会出现很多触发式加载的特殊效果，让这个网站的风格瞬间显得非常的高大上，让你的企业品牌在访客心中留下更深的影响。当然，我们在使用jquery特效的同时也要注意程序对搜索引擎的友好型，所以这一点儿作者也有考虑到，已经尽可能的对js和css脚本进行精简和优化，尽可能的加快网站加载速度，同时也
Firefox 和新版 Edge 怎么办？没有原生滚动条 API
Firefox 完全不支持 ::-webkit-scrollbar，Edge（Chromium 内核）虽支持但行为略有差异；目前没有跨浏览器标准 API 可以统一定制滚动条外观。
- 唯一可靠方案：用 JavaScript 模拟滚动条（如
simplebar、overlay-scrollbars），它们会隐藏原生条、插入自定义 DOM 节点 - 代价明显：增加 JS 体积、可能影响滚动性能、需监听容器尺寸变化重新初始化
- 如果只是微调颜色/圆角，建议放弃 Firefox 支持，或用渐进增强思路——WebKit 下美化，其他浏览器保持默认（系统原生更易用）
别试图用 scrollbar-color（Firefox）+ ::-webkit-scrollbar 双写来“兼顾”，因为 scrollbar-color 只控制 thumb 和 track 颜色，不支持宽度、圆角等，能力非常有限。
Grid 子项内嵌滚动？小心嵌套 overflow 的陷阱
常见需求：整个网格可垂直滚动，但某一个 grid-area（比如侧边栏或日志面板）也要独立滚动。这时容易混淆“谁该设 overflow”。
- 网格容器设
overflow-y: hidden（防外溢），再给目标子项单独设overflow-y: auto+ 固定高度（如height: 200px） - 错误做法：给子项设
height: 100%却不约束父 grid 行高，导致高度计算为 0，滚动失效 - 若用
grid-template-rows: 1fr 2fr，想让第二行可滚动，就得给对应子项加min-height: 0（防止 flex/grid 伸缩时忽略 overflow）
Grid 布局中，overflow 生效的前提是元素有“块格式化上下文边界”，而 min-height: 0 是最常被忽略的破局点。
滚动条定制在 Grid 里不是加个 class 就完事的事，它卡在布局计算、渲染管线、浏览器实现三者的交界上。真正麻烦的从来不是怎么写 CSS，而是搞清“此刻到底是谁在滚动、谁该负责截断、谁又悄悄吃了 overflow”。
