局部滚动容器必须设height或max-height且overflow-y为auto/scroll才能生效；无固定高度时scrollTop恒为0，滚动无效；flex子项需加flex-shrink: 0防塌陷；scrollBy()比直接操作scrollTop更稳定。
局部滚动容器必须设 height + overflow-y 才能生效
没固定高度的 div 即使写了 overflow-y: auto，scrollTop 也始终为 0，滚动完全无效。浏览器只对“有明确可视区域边界”的容器启用滚动上下文。高度不能靠 min-height 或内容撑开——必须是 height 或 max-height。
常见错误现象：scrollBy() 没反应、滚动条不出现、按钮点击后内容“闪一下”就回弹。尤其当容器是 flex 子项时，记得加 flex-shrink: 0 防止被压缩塌陷。
用 scrollBy() 控制步进速度比 scrollTop 更稳
scrollBy() 是相对位移，不依赖初始状态，连点、重排、异步渲染后仍稳定。它天然适配“点一下滚一段”的交互直觉。
- 向上滚动 40px：
container.scrollBy({ top: -40 }) - 向下平滑滚动 60px：
container.scrollBy({ top: 60, behavior: 'smooth' }) - Safari 15.4 以下不支持
behavior: 'smooth'，可直接降级为container.scrollBy({ top: 60 })，视觉差异不大
别在 scroll 事件里反复读写 scrollTop——每次读取都会强制触发 layout，长列表中极易掉帧。
CSS animation 替代 marquee 实现精确变速滚动
scrollamount 是 的废弃属性，现代浏览器（Chrome/Firefox/Safari）已完全忽略。HTML5 中 属于 obsolete 元素，不应再用于生产环境。
真正可控的方式是用 @keyframes + animation-duration：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
.scroll-text span {
animation: scroll-left 12s linear infinite;
}
@keyframes scroll-left {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
滚动快慢由 animation-duration: 12s 决定：数值越小越快（如改为 6s 就快一倍）。必须确保容器有 overflow: hidden 且宽度明确，否则裁剪失效。
边界判断和按钮禁用逻辑要防 subpixel 误差
仅用 container.scrollTop === 0 判断是否到顶，或 container.scrollTop >= container.scrollHeight - container.clientHeight 判断到底，在高 DPI 屏、缩放页面、iframe 嵌套等场景下极易误判——真实滚动位置是浮点数。
正确做法：
- 顶部禁用：
container.scrollTop - 底部禁用：
container.scrollTop > container.scrollHeight - container.clientHeight - 0.5
按钮状态更新建议节流，比如用 setTimeout(..., 100) 或 requestIdleCallback，避免滚动中高频重绘。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
