局部滚动区域必须设固定高度（height/max-height）和overflow-y，否则scrollTop恒为0；需避免transform等隔离滚动上下文；推荐用scrollBy()替代手动维护scrollTop；判断滚动边界应使用浮点容差；scroll-behavior: smooth须作用于可滚动容器本身。

局部滚动区域必须设固定高度 + overflow-y，否则scrollTop永远为 0，滚动完全无效。

容器必须有明确 height 或 max-height

没有固定高度的 div 即使写了 overflow-y: auto，浏览器也不会创建滚动上下文——scrollTop 始终是 0，scrollBy() 也无响应。

• height 或 max-height 必须是具体数值（如 300px、70vh），不能靠 min-height 或内容撑开
• 父级若含 transform、perspective 或 filter，会隔离滚动上下文，此时需确认该容器是否真被识别为可滚动元素（查 DevTools 的 Computed 面板里 overflow 是否生效）
• Safari 下偶发不触发滚动事件，可改用 overflow-y: scroll 强制显示滚动条，确保上下文稳定

用 scrollBy() 替代手动维护 scrollTop

按钮驱动滚动时，scrollBy() 比直接改 scrollTop 更鲁棒：它不依赖初始状态，异步渲染、DOM 重排、连点操作后仍能准确步进。

• 对局部容器：先获取元素，再调用 container.scrollBy({ top: 40, behavior: 'smooth' })
• 不支持 behavior: 'smooth' 的旧 Safari（15.4 以下），降级为 container.scrollBy({ top: 40 })，视觉差异极小
• 避免在 scroll 事件中读写 scrollTop —— 每次读取都会强制同步 layout，长列表中极易掉帧

边界判断要用浮点容差，别信整数相等

高 DPI 屏、页面缩放、iframe 嵌套等场景下，scrollTop 是小数（如 299.99999999999994），仅用 === 0 或 >= scrollHeight - clientHeight 判断会误触发禁用逻辑。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

立即学习“前端免费学习笔记（深入）”；

• 到顶判断应写成：container.scrollTop
• 到底判断应写成：container.scrollTop > container.scrollHeight - container.clientHeight - 0.5
• 按钮状态更新建议节流，例如用 setTimeout(..., 100)，避免滚动中高频重绘

scroll-behavior: smooth 要写在可滚动容器上才生效

scroll-behavior: smooth 不是全局开关，它只对设置了 overflow: auto 或 scroll 的容器本身有效；写在 html 上管整个页面，写在局部 div 上才管那个区域。

• 局部容器启用平滑滚动：给该 div 加 scroll-behavior: smooth，同时确保它已设 height 和 overflow-y
• 别写在 body 或通配符上——body { scroll-behavior: smooth } 在 Safari 中会被忽略
• 若用 JS 调 scrollTo() 或 scrollIntoView()，仍需显式传 { behavior: 'smooth' }，它不继承容器的 scroll-behavior

最常被跳过的其实是容器是否真正进入了滚动上下文——哪怕样式写全了，只要父级有 transform 或 will-change，就可能悄无声息地切断滚动链。动手前，先在 DevTools 里点开那个元素，看 Computed 面板里的 overflow 和 scroll-behavior 是否真的生效，比反复试错快得多。