scrollBy是相对位移滚动，每次在当前位置累加偏移；scrollTo是绝对坐标滚动，直接跳转到指定位置；二者均可作用于window或可滚动元素，但需确保目标元素具备overflow和足够内容高度。
scrollBy 和 scrollTo 都是用于控制元素或页面滚动位置的原生方法，但它们的行为逻辑不同：scrollTo 是“绝对定位”，scrollBy 是“相对位移”。关键在于调用对象——可以是 window（控制整个视口），也可以是带 overflow 的 DOM 元素（需设置 scrollingElement 或直接操作其 scrollTop/scrollLeft）。
scrollTo：跳转到指定坐标
它把滚动容器的左上角（0, 0）对齐到目标坐标点。参数支持对象写法（推荐）或两个数字：
-
element.scrollTo({ top: 100, left: 0, behavior: 'smooth' })—— 平滑滚动到距顶部 100px 处 -
window.scrollTo(0, 200)—— 窗口纵向滚动到 200px 位置（等价于{ top: 200, left: 0 }） - 第三个参数
behavior: 'smooth'可启用动画，但仅在部分浏览器中对非 window 元素生效；更稳妥的方式是给目标元素加 CSS：scroll-behavior: smooth;
scrollBy：从当前位置偏移滚动
它在当前滚动位置基础上增加偏移量，适合实现“下一页”、“回到顶部”这类交互：
-
element.scrollBy({ top: 50, behavior: 'smooth' })—— 向下滚动 50px（无论当前在哪） -
window.scrollBy(0, -100)—— 页面向上回滚 100px - 注意：如果目标元素没有发生滚动（例如 overflow: hidden 或内容不够高），scrollBy 不会报错，但无视觉变化
对普通 DOM 元素使用 scrollBy/scrollTo 的前提
不是所有元素都支持这两个方法。必须满足：
立即学习“Java免费学习笔记（深入）”；
- 该元素设置了
overflow: auto、scroll或overlay（如overflow-y: scroll） - 内部内容高度（或宽度）超出元素自身尺寸，产生可滚动区域
- 直接调用
element.scrollTo(...)即可，无需额外代理；现代浏览器已普遍支持 - 兼容性提示：IE 不支持对象参数和
behavior，可用降级方案：element.scrollTop += 50
实用技巧与常见误区
避免“滚动无效”的典型场景：
- 误对
div调用window.scrollTo()—— 记住：window 控制页面，元素控制自身 - 未等待元素渲染完成就调用滚动（如 Vue/React 中在
mounted或useEffect里立即 scroll，建议加requestAnimationFrame或setTimeout(..., 0)） - 想滚动到某个子元素却用了
scrollBy—— 正确做法是先计算子元素相对于父容器的 offset，再传给scrollTo：parent.scrollTo({ top: child.offsetTop - parent.offsetTop })
