局部滚动容器必须设固定高度或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"></marquee> 已被 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 管理一块调。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！