HTML局部滚动效果实战教程-html教程-PHP中文网

根本原因是容器没“被框住”——需设明确height或max-height，且父级不能让它无限撑高；仅overflow-y:auto无效，用%单位时父元素须有固定高度（如height:100vh），否则计算为0。

html局部滚动效果实战教程

根本原因是容器没“被框住”——它需要明确的 height 或 max-height，且父级不能让它无限撑高。只写 overflow-y: auto 是无效的。

用 % 单位时，确保父元素有固定高度（比如 height: 100vh），否则计算结果为 0
Flex 布局中，滚动容器的直接父级若设了 display: flex，必须加 overflow: hidden 或显式 height，否则子项会被拉伸或塌陷
避免用 min-height 代替 height：它不触发滚动上下文，内容一多就溢出到外部
Safari 下偶发滚动条不显示？换用 overflow-y: scroll 强制占位，或动态重设一次 el.style.height = el.offsetHeight + 'px'

scrollBy 更稳。它基于当前位置做相对位移，不依赖初始状态，连点、异步渲染、DOM 重排后仍能准确累加；scrollTo 需手动维护绝对位置，容易在快速点击时失准。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

对局部容器调用：container.scrollBy({ top: 40, behavior: 'smooth' })（现代浏览器支持）
旧版 Safari 不支持 behavior: 'smooth'？直接去掉该字段，视觉差异不大
向上滚动时别写 container.scrollTop -= 40：小数精度、缩放、DPI 都会让边界判断失效；改用 scrollBy({ top: -40 }) 让浏览器自己截断
如果必须用 scrollTop（比如兼容 IE11），边界判断要留余量：container.scrollTop 才算到顶

说明容器压根没产生可滚动空间。先查三件事：container.scrollHeight、container.clientHeight、container.scrollTop。如果前两者相等，或 scrollTop 始终为 0，那就不是代码问题，而是布局没达标。

检查是否误用了 overflow: hidden —— 它会直接禁掉滚动能力
父级用了 transform、filter 或 contain: layout？这些会创建新层叠上下文，干扰滚动事件派发和 offsetTop 计算
Vue/React 中绑定事件太早？等 mounted 或 useEffect 完成、DOM 渲染完毕再获取容器尺寸
滚动回调里别频繁读 scrollTop：它会强制同步 layout，卡顿明显；改用 getBoundingClientRect() 或 IntersectionObserver

这个属性不继承，也不作用于根节点以外的任意祖先——它必须显式写在那个带 overflow 的滚动容器上，且该容器得先满足“能滚”的所有前提（高度 + 溢出）。

正确写法：.list-container { height: 300px; overflow-y: auto; scroll-behavior: smooth; }
别设在 html 或 body 上——那会影响全页锚点跳转，不是你想要的局部效果
iOS Safari 15.4 之前有 bug：scrollIntoView({ behavior: 'smooth' }) 在局部容器内可能失效，此时降级为 JS 动画或直接 scrollTo(0, 0)
用户开启了系统“减少运动”偏好？scroll-behavior: smooth 会自动退化为瞬跳，这是预期行为，不用绕过

局部滚动真正难的不是写几行 CSS，而是每次改动布局都可能悄悄破坏高度约束链——尤其是嵌套 Flex/Grid、动态插入内容、或跨框架通信时，容器高度极易“蒸发”。调试时第一反应不该是查 JS，而是打开 DevTools 看 computed height 和 overflow 是否如预期。