局部滚动容器必须设 height 或 max-height，否则 scrollTop 始终为 0；因浏览器仅对具备明确滚动边界的容器启用滚动上下文，无高度时 scrollHeight 等于 clientHeight，无法产生可滚动空间。
局部滚动容器必须设 max-height 或 height，只写 overflow-y: auto 不会触发滚动上下文
为什么 scrollTop 始终为 0？
浏览器只对具备明确“滚动边界”的容器启用滚动能力。若容器没设 height 或 max-height，它的滚动高度（scrollHeight）就等于可视高度（clientHeight），导致 scrollTop 永远只能是 0。
-
min-height不行——它不定义滚动上下文的上限 -
%单位慎用——父级若没显式高度，计算结果为 0 - Flex 子项要加
flex-shrink: 0，否则可能被压缩塌陷 - 避免用
overflow: hidden包裹，它直接禁掉滚动能力
max-height 和 height 该怎么选？
多数场景推荐 max-height：内容少时容器自然收缩，内容多时才滚动；而 height 是刚性限制，哪怕只有一行文字也会留出大片空白。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 侧边导航菜单、日志列表、聊天历史等动态长度内容 → 用
max-height - 模态框内固定区域、表单分组区、卡片内摘要区 →
height更可控 - 单位优先用
px、vh或rem，避开依赖父级的% - 搭配
overflow-y: auto（不是scroll），避免 Safari 下滚动事件偶发丢失
JavaScript 控制最大滚动范围要注意什么？
如果业务要求“最多只允许滚到某位置”，不能只靠 CSS；需在 scroll 事件中校验并截断 scrollTop 值。
立即学习“前端免费学习笔记（深入）”；
- 监听前先确认容器已渲染完成，否则
clientHeight/scrollHeight可能为 0 - 别在
scroll回调里读写offsetHeight等布局属性，会触发强制同步重排 - 用
container.scrollTo({ top: Math.min(value, maxHeight) })比直接赋值scrollTop更可靠 - 移动端注意 iOS Safari 的 scroll-behavior 兼容性，必要时降级为
behavior: 'auto'
真正容易被忽略的是：局部滚动是否生效，和内部子元素的 display 类型强相关——比如用了 display: contents 或 visibility: hidden，会导致 scrollHeight 计算异常，此时即使写了 max-height 和 overflow-y: auto，滚动条也不会出现。
