局部滚动容器必须设固定高度或max-height才能启用overflow-y滚动；方向由溢出行为决定而非direction属性；废弃marquee，改用transform+keyframes实现可控纵向滚动。
局部滚动容器必须设固定高度 + overflow-y
局部滚动不是靠 direction 属性控制方向，而是由 CSS 的溢出行为和滚动轴决定。没有固定高度的 div 即使写了 overflow-y: scroll 也不会出现滚动条——内容直接撑开容器，根本“滚”不起来。
- 必须显式设置
height或max-height（推荐后者，更适应内容变化） -
overflow-y: auto或scroll才能启用垂直滚动；overflow-x: hidden防止意外横向滚动 - 不要依赖
body或html的滚动，局部滚动要隔离作用域，避免和页面主滚动耦合 - 若容器内有 flex 布局子元素，注意
align-items: flex-start可能导致顶部空白，影响视觉“起始位置”判断
用 transform + keyframes 实现可控纵向滚动（替代 marquee）
<marquee direction="up"> 已被 HTML5 废弃，且在 Safari 或 Chrome 新版本中常失效——它不支持 CSS 过渡、无法监听暂停、无障碍支持差。真正可控的纵向滚动得靠 CSS 动画或 JS。
- 核心是让内容块在固定高容器内持续位移：
transform: translateY()，配合@keyframes定义起点和终点 - 动画时长和位移距离要匹配内容总高度，例如 3 行文本、每行 24px，则终点建议设为
translateY(-72px) - 用
animation-iteration-count: infinite实现循环，animation-timing-function: linear保证匀速 - 鼠标悬停暂停需用 JS 监听
mouseenter/mouseleave，动态增删animation-play-state
JS 控制滚动方向时别用 scrollTop 判断方向
如果要做“用户向上滚时显示↑箭头、向下滚时隐藏”，千万别在局部容器上读 scrollTop 来算方向——它在 Safari 下常返回 0，且受父级 transform 或 contain 影响失真。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 正确做法：用
getBoundingClientRect().top对比相邻帧位置，或监听scroll事件中element.scrollTop的差值（但必须节流） - 更稳的是记录上一次
scrollY（对 window）或scrollTop（对目标元素），再减当前值：delta = current - last，> 0 为向下 - 记得加
requestAnimationFrame包裹逻辑，避免滚动卡顿；别用setTimeout做节流，精度差 - 滚动结束检测不能只靠
scrollend——Firefox 和 Safari 完全不支持，得用setTimeout延迟 150ms 后判定“静止”
移动端惯性滚动要加 -webkit-overflow-scrolling
iOS Safari 默认局部滚动无惯性，手指松开就停，体验像“卡顿”。这不是 bug，是 WebKit 的默认策略，必须手动开启。
立即学习“前端免费学习笔记（深入）”；
- 给滚动容器加
-webkit-overflow-scrolling: touch，仅 iOS 有效，不影响其他平台 - 该属性必须和
overflow-y: scroll同时存在才生效；单独写无效 - 注意：开启后，容器内 fixed 定位元素可能错位（如吸顶按钮），需改用
position: sticky或 JS 重定位 - Android Chrome 无需此属性，默认就有惯性，加了也无害，但没必要
滚动方向本身不难设，真正麻烦的是边界处理：内容高度动态变化时动画怎么重置、键盘导航（Tab 键）是否能进入滚动区、屏幕阅读器能否感知滚动状态——这些没法靠一个 CSS 属性解决，得结合 ARIA 属性（如 aria-live）和 focus 管理一块调。
