如何使用JavaScript将overflow:scroll容器内的指定节点滚动指定像素数？

嘿，这个问题其实很好解决——思路和你用window.scrollTo()整屏滚动的逻辑差不多，只是把操作对象从全局的window换成那个设置了overflow: scroll的容器元素就可以啦！下面给你几种实用的实现方式：

方法1：使用元素的scrollTo()方法 #

这个方法和全局的window.scrollTo()用法几乎完全一致，直接给目标容器调用即可，支持两种传参方式：

首先你需要先获取到目标容器元素：

// 假设你的容器id是scroll-box
const scrollContainer = document.getElementById('scroll-box');

方式A：传入配置对象（推荐，支持平滑滚动） #

可以指定滚动的目标位置，还能设置滚动行为：

scrollContainer.scrollTo({
  top: 200,    // 垂直方向滚动到200px的位置
  left: 100,   // 水平方向滚动到100px的位置
  behavior: 'smooth' // 可选值：'auto'（瞬间滚动）或 'smooth'（平滑滚动）
});

方式B：直接传入数值参数 #

参数顺序是水平偏移量在前，垂直偏移量在后：

// 效果和上面的配置对象一致，只是没有平滑滚动
scrollContainer.scrollTo(100, 200);

方法2：使用scrollBy()实现相对滚动 #

如果你的需求不是滚动到某个绝对位置，而是相对于当前滚动位置再滚动指定像素，那scrollBy()就很合适：

// 相对于当前位置，向下滚动50px，向右滚动30px
scrollContainer.scrollBy({
  top: 50,
  left: 30,
  behavior: 'smooth'
});

方法3：直接设置scrollTop/scrollLeft属性 #

这是最直接的原生属性控制方式，兼容性拉满（所有支持滚动容器的浏览器都能生效），不过默认是瞬间滚动：

// 垂直滚动到200px的位置
scrollContainer.scrollTop = 200;
// 水平滚动到100px的位置
scrollContainer.scrollLeft = 100;

小提醒 #

一定要确保你获取的元素是真正设置了overflow: scroll（或overflow: auto）的那个容器，别误选了它的父元素或子元素哦！

内容的提问来源于stack exchange，提问作者Ricardo