必须给容器设固定高度+overflow-y:auto或scroll，否则滚动不会触发；常见原因是容器height为auto、min-height或未设置，导致内容撑开容器而无溢出，浏览器不显示滚动条。
必须给容器设固定高度 + overflow-y: auto 或 scroll，否则滚动不会触发。
为什么加了 overflow-y: scroll 还不滚动？
常见原因是容器没有明确的高度约束——height 为 auto、min-height 或未设置时，内容会直接撑开容器，浏览器判定“没溢出”，自然不显示滚动条。
- 确保父级不靠
flex: 1或height: 100%模糊继承，而是显式写死像素值或视口单位（如height: 400px或height: 60vh） - 如果用 Tailwind，
h-full只在父容器已有确定高度时才有效；更稳妥的是h-[400px]或max-h-[400px] - 检查是否被
white-space: nowrap或浮动子元素破坏了块级流，导致高度计算异常
auto 和 scroll 的实际区别在哪？
二者都启用纵向滚动，但行为不同：
-
overflow-y: auto：仅当内容真实超出容器高度时才显示滚动条，节省空间，适合内容长度不确定的区域（如评论列表） -
overflow-y: scroll：无论是否溢出，始终预留滚动条位置（哪怕只是个空槽），避免内容因滚动条出现而发生水平位移，适合布局敏感场景（如表单侧边栏） - 注意：
scroll在 Safari 中可能仍隐藏轨道，但占位逻辑成立；若需强制显示且可交互，用auto+ JS 检测scrollHeight > clientHeight后再添加类更可控
滚动条样式怎么改？只对 WebKit 有效
::-webkit-scrollbar 系列伪元素是目前唯一广泛支持的自定义方式，但仅限 Chrome、Edge、Safari；Firefox 和部分移动端不识别。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 必须作用于已启用纵向滚动的容器上，例如：
.list-container::-webkit-scrollbar { width: 6px; } - 轨道和滑块要分开设色：
.list-container::-webkit-scrollbar-track { background: #f5f5f5; }，.list-container::-webkit-scrollbar-thumb { background: #999; border-radius: 3px; } - 别漏掉
background-clip: padding-box，否则圆角可能被容器内边距裁切 - 无 WebKit 支持的环境会回退到原生样式，无法统一外观——这不是 bug，是现实限制
局部滚动时，如何防止滚到底还继续拖拽页面？
这是典型的“滚动穿透”问题：手指在可滚动区域快速拖拽到底后，惯性会把整个页面也带下去。解决关键在 overscroll-behavior-y。
- 在滚动容器上加
overscroll-behavior-y: contain，它会截断纵向滚动传播，让容器自己“吃掉”到底后的多余拖拽 - 不要用
overscroll-behavior: none，它同时禁用下拉刷新等有用行为 - 该属性兼容性良好（Chrome 63+、Firefox 68+、Safari 16.4+），iOS Safari 16.4 起才支持，旧版需配合
touch-action: pan-y辅助 - 若容器内含
iframe，其内部滚动仍可能穿透，此时需在 iframe 的srcdoc或内联样式中同样设置
真正容易被忽略的是：滚动容器的子元素如果有 transform、position: absolute 或 flex 自适应项，可能导致 scrollHeight 计算错误，进而让 scrollTop 失效或滚动条长度异常。这种问题往往不报错，只表现为“滚不动”或“滚过头”，得用 DevTools 逐层检查盒模型尺寸。
