<marquee>标签已被现代浏览器弃用，无法精准控制滚动、暂停交互或响应式适配；实现局部垂直滚动需确保父容器有明确高度（如height: 200px），配合overflow-y: auto，避免使用scroll；自动轮播应采用CSS @keyframes + transform: translateY()双份内容无缝循环，并用JS控制animation-play-state暂停。
<marquee> 已被现代浏览器弃用，且无法精准控制滚动区域、暂停交互或适配响应式场景。真要实现「局部滚动」，得用标准 CSS + JavaScript 方案。
让某个 div 区域独立垂直滚动
这是最常见需求：比如侧边菜单、日志面板、聊天记录区——内容超出容器时只在内部滚动，不影响页面其他部分。
- 关键不是加
overflow就完事，得确保父容器有明确高度（height或max-height），否则overflow-y: auto不生效 - 避免用
overflow: scroll，它会强制显示滚动条（即使内容没溢出）；auto更合理 - 若需隐藏原生滚动条但保留滚动能力，可用
::-webkit-scrollbar隐藏（仅限 WebKit 内核），Firefox 需用scrollbar-width: none - 示例：
<div style="height: 200px; overflow-y: auto; border: 1px solid #ccc;"> <p>第1条消息</p> <p>第2条消息</p> <p>第3条消息</p> <!-- 更多内容... --> </div>
用 JavaScript 控制滚动位置（如回到顶部/跳转到某项）
纯 CSS 滚动是被动的，用户拖拽才动；而 scrollTop 和 scrollIntoView 才能主动干预。
-
element.scrollTop = 0可立即置顶，但生硬；加{ behavior: 'smooth' }可启用平滑滚动（注意 IE 不支持） -
targetElement.scrollIntoView({ block: 'start', behavior: 'smooth' })更灵活，适合列表中高亮某一条 - 监听滚动事件别直接写
onscroll，优先用addEventListener('scroll', handler)，便于后续removeEventListener - 频繁触发的滚动事件建议节流，否则影响性能；简单场景可用
requestAnimationFrame包一层
实现无缝自动轮播式滚动（非 marquee）
大屏展示、数据看板常需要内容自动上滚，且不能闪、不能断、鼠标悬停可暂停——<marquee> 完全做不到这点。
立即学习“前端免费学习笔记（深入）”；
- 核心思路是：渲染两份相同内容，用
@keyframes把整体 translateY 从0动画到-50%，循环播放 - 必须给容器设
overflow: hidden，否则复制内容会撑开容器 - 动画时长要和单条内容高度匹配，否则速度失真；例如每条高
40px，双份总高80px，则animation-duration: 4s≈ 每秒滚20px - 暂停靠 JS 切换
animation-play-state: paused，别试图改animation-duration，那会导致跳帧
真正难的不是写几行代码，而是理解「滚动」本质是视口裁剪 + 位移变化；一旦混用 scrollTop、transform、position: sticky，就容易出现定位偏移、滚动卡顿或 touch 事件失效——这些细节不调试根本看不出来。
