HTML5中滚动条由浏览器自动触发，前提是容器设定了height/max-height且overflow为auto；常见失效原因是未设固定尺寸或overflow为visible/hidden；自定义样式仅WebKit支持，移动端需加touch-action: pan-y。
HTML5 静态网页中滚动条不是“加”出来的，而是浏览器自动显示的——前提是容器内容真正溢出且 overflow 属性被正确设置。手动“加滚动条”本质是控制 overflow 行为，而不是插入某个组件。
为什么 div 里内容多了却不出现滚动条？
最常见原因是父容器没设固定高度或宽度，或者 overflow 被设为 visible（默认值）或 hidden。浏览器只在明确知道“空间不够”时才触发滚动机制。
-
height或max-height必须显式设置（比如300px、50vh），不能依赖内容撑开 -
overflow推荐用auto：有溢出才显示滚动条，没溢出则隐藏，比scroll更友好 - 若用了
flex布局，注意flex-shrink: 0或min-height: 0可能阻止子项溢出计算
给整个页面禁用/启用垂直滚动条
控制 的 overflow 即可，但要注意副作用：禁用后内容可能被截断，且 position: fixed 元素会随页面一起消失（因 body 失去滚动上下文）。
body {
overflow-y: hidden; /* 禁用垂直滚动 */
overflow-y: auto; /* 恢复自动判断 */
}更安全的做法是限制在特定区域，而非全局操作 body。
立即学习“前端免费学习笔记（深入）”；
自定义滚动条样式（仅 WebKit 内核有效）
Chrome/Safari/Edge 支持 ::-webkit-scrollbar 伪元素，Firefox 不支持，无法跨浏览器统一。不要把它当作功能必需项，而是视觉增强选项。
/* 整个滚动条 */
.container::-webkit-scrollbar {
width: 8px;
}
/* 滑块 */
.container::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 4px;
}
/* 滑块悬停 */
.container::-webkit-scrollbar-thumb:hover {
background-color: #555;
}务必搭配 overflow: auto 使用，否则伪元素不生效；且该样式不会影响滚动行为本身，只改外观。
移动端滚动卡顿或失效怎么办？
iOS Safari 和部分安卓 WebView 对 overflow: auto 容器内的滚动有严格限制：必须添加 -webkit-overflow-scrolling: touch 才能启用原生惯性滚动（已废弃但仍需保留以兼容旧版）。
- 现代方案：用
touch-action: pan-y替代（推荐） - 确保容器有
height/max-height，且内部元素未意外触发transform或will-change导致合成层异常 - 避免在滚动容器内监听
scroll事件做重计算，改用passive: true选项防阻塞
滚动条本身只是溢出的副产品，真正要调的是尺寸约束和溢出策略。很多人反复试 overflow: scroll 却没设 height，结果白忙一场。
