Window scrollBy() 方法（千字长文）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

引言：网页滚动的底层逻辑

在现代网页开发中，滚动（Scroll）是用户与页面交互的核心操作之一。无论是导航栏的固定定位、表单提交后的焦点跳转，还是复杂的数据分页加载，滚动控制都扮演着关键角色。而 Window scrollBy() 方法作为 JavaScript 原生提供的滚动控制工具，其简洁的语法和直观的语义，使其成为开发者实现自定义滚动逻辑的首选方案。

本文将从基础概念出发，结合实际案例与代码示例，深入讲解 scrollBy() 的工作原理、使用场景及进阶技巧，帮助开发者快速掌握这一方法并灵活应用于项目开发。

一、滚动控制的基础知识：坐标系与滚动类型

1.1 窗口坐标系的定义

网页的滚动行为本质上是浏览器窗口（Window）与文档（Document）之间坐标系的相对移动。浏览器通过 window.pageXOffset 和 window.pageYOffset 属性记录当前滚动的偏移量，而 scrollBy() 方法正是通过调整这两个值来实现滚动效果。

形象比喻：
可以将网页文档想象为一张固定尺寸的“地图”，而浏览器窗口则是观察这张地图的“望远镜”。当用户拖动滚动条或触发 scrollBy() 时，望远镜的视野（即窗口）会在地图上移动，但地图本身的位置并未改变。

1.2 滚动方法的分类

JavaScript 提供了三种核心滚动方法：

• window.scrollTo()：直接定位到指定坐标
• window.scrollBy()：基于当前位置偏移指定距离
• window.scroll()：兼容旧浏览器的语法糖（行为与 scrollTo 相似）

对比表格：
| 方法名 | 参数类型 | 语义解释 |
|----------------|-------------------|-----------------------------------|
| scrollTo() | 绝对坐标值 | 直接跳转到目标位置 |
| scrollBy() | 相对位移值 | 从当前位置移动指定距离 |
| scroll() | 绝对或相对参数 | 语法兼容性封装（推荐使用前两者） |

二、Window scrollBy() 方法详解

2.1 语法结构与参数

scrollBy() 的基本语法如下：

window.scrollBy(x, y);  

• x：水平方向的位移量（单位：像素）
• y：垂直方向的位移量（单位：像素）

参数规则：

• 正值表示向右（x）或向下（y）移动
• 负值表示向左（x）或向上（y）移动
• 若省略参数，未指定方向将保持原坐标

2.2 核心特性与行为

特性 1：基于当前位置的相对偏移

与 scrollTo() 的绝对定位不同，scrollBy() 的位移始终以当前滚动位置为基准。例如：

// 当前滚动位置为 (200, 300)  
window.scrollBy(100, 200);  
// 新位置变为 (300, 500)  

特性 2：支持负值回滚

开发者可通过负值实现“反向滚动”效果：

// 返回上一个滚动位置（假设原位置为 (500, 600)）  
window.scrollBy(-100, -100); // 新位置 (400, 500)  

特性 3：无参数时的默认行为

若调用时不传入参数，scrollBy() 会将窗口滚动至页面顶部：

window.scrollBy(); // 等同于 window.scrollTo(0, 0)  

2.3 浏览器兼容性与 Polyfill

该方法在主流浏览器中均得到支持（包括 IE9+），但移动端浏览器对水平滚动的响应可能因设备而异。对于需要兼容老旧环境的项目，可通过以下代码实现简易 Polyfill：

if (!window.scrollBy) {  
  window.scrollBy = function(x, y) {  
    this.scrollTo(  
      this.pageXOffset + (x || 0),  
      this.pageYOffset + (y || 0)  
    );  
  };  
}  

三、实战案例：scrollBy() 的典型应用场景

3.1 案例 1：导航栏固定定位时的滚动跳转

在固定定位（position: fixed）的导航栏中，点击菜单项后需跳转到对应内容区域。此时 scrollBy() 可结合计算后的偏移量实现平滑过渡：

HTML 结构：

<nav id="fixedNav">  
  <a href="#section1">Section 1</a>  
  <a href="#section2">Section 2</a>  
</nav>  
<div id="section1" style="height: 1000px">内容1</div>  
<div id="section2" style="height: 1000px">内容2</div>  

JavaScript 实现：

document.querySelectorAll('#fixedNav a').forEach(link => {  
  link.addEventListener('click', (e) => {  
    e.preventDefault();  
    const target = document.querySelector(e.target.hash);  
    const offsetTop = target.offsetTop;  
    // 减去导航栏高度以避免遮挡  
    window.scrollBy(0, offsetTop - 60);  
  });  
});  

3.2 案例 2：表单验证失败时的焦点定位

当表单提交失败时，可将窗口滚动至第一个错误字段：

function scrollToFirstError() {  
  const firstError = document.querySelector('.form-error');  
  if (firstError) {  
    const rect = firstError.getBoundingClientRect();  
    // 水平不移动，垂直滚动到元素顶部  
    window.scrollBy(0, rect.top - 60); // 减去顶部边距  
  }  
}  

3.3 案例 3：动态内容加载后的滚动动画

结合 requestAnimationFrame 实现平滑滚动效果：

function smoothScrollBy(x, y, duration = 500) {  
  const start = { x: window.pageXOffset, y: window.pageYOffset };  
  const change = { x: x, y: y };  
  const increment = 20; // 每帧执行时间（毫秒）  

  let startTimestamp = null;  

  function animateScroll(timestamp) {  
    if (!startTimestamp) startTimestamp = timestamp;  
    const timeElapsed = timestamp - startTimestamp;  

    const progress = Math.min(timeElapsed / duration, 1);  
    window.scrollTo(  
      start.x + change.x * progress,  
      start.y + change.y * progress  
    );  

    if (timeElapsed < duration) {  
      requestAnimationFrame(animateScroll);  
    }  
  }  

  requestAnimationFrame(animateScroll);  
}  

// 使用示例  
smoothScrollBy(0, 1000, 1000); // 1秒内向下滚动1000px  

四、注意事项与优化技巧

4.1 滚动边界与防溢出处理

当滚动位移超出文档范围时，浏览器会自动限制滚动位置。例如，若文档高度为 2000px，而当前滚动位置为 1500px，调用 scrollBy(0, 1000) 将仅移动至底部而非指定值。

解决方案：
在调用前计算最大可滚动距离：

const maxScrollY = document.body.scrollHeight - window.innerHeight;  
const safeY = Math.min(  
  window.pageYOffset + delta,  
  maxScrollY  
);  
window.scrollTo(window.pageXOffset, safeY);  

4.2 移动端的滚动特性差异

在移动端，scrollBy() 可能触发浏览器的“弹性滚动”效果（overscroll）。若需禁用此行为，可通过 CSS 实现：

body {  
  overscroll-behavior-y: contain; /* 防止滚动超出边界时的回弹效果 */  
}  

4.3 性能优化建议

• 避免在频繁触发的事件（如 scroll 事件）中直接调用 scrollBy()，可能导致滚动卡顿
• 对滚动动画使用节流（throttle）或防抖（debounce）技术
• 使用 window.requestIdleCallback 在空闲时段执行非紧急的滚动操作

五、扩展思考：与 CSS 滚动属性的协同

现代 CSS 提供了 scroll-behavior 属性，可全局或局部控制滚动动画：

html {  
  scroll-behavior: smooth; /* 开启平滑滚动 */  
}  

结合 scrollBy() 可实现混合效果：

window.scrollBy(0, 500); // 会触发 CSS 定义的平滑动画  

结论：滚动控制的平衡艺术

Window scrollBy() 方法以其简洁的语法和灵活的定位能力，成为开发者实现复杂滚动逻辑的得力工具。无论是简单的导航跳转，还是结合 CSS 的平滑动画，开发者需始终关注以下核心原则：

1. 用户感知优先：滚动动画需符合自然的人机交互预期
2. 边界条件处理：确保滚动操作在合理范围内执行
3. 性能与兼容性：在不同设备与浏览器环境中保持一致性

通过本文的深入解析与案例演示，开发者应能快速掌握 scrollBy() 的使用场景与实现细节，并在实际项目中游刃有余地运用这一基础但强大的 JavaScript 方法。