如何让Window.scroll/scrollTo方法作用于position:fixed的滚动div？

嘿，这个问题我之前也踩过坑！核心原因其实很直白：window.scroll() 和 window.scrollTo() 是专门用来操作整个文档（document.body/html）的滚动行为的，而你的那个设置了position:fixed和overflow-y:scroll的div，是一个独立的元素级滚动容器，和全局文档滚动完全是两个独立的上下文，所以这两个方法当然不会作用在它身上啦。

不过别担心，有几个简单的办法可以实现类似的效果：

1. 直接操作滚动容器的scrollTop/scrollLeft属性 #

这是最直接的方式，获取到你的固定div元素后，直接修改它的滚动位置属性就行：

// 先获取你的固定滚动容器
const fixedScrollContainer = document.getElementById('your-fixed-div-id');

// 滚动到顶部1000px的位置
fixedScrollContainer.scrollTop = 1000;
// 如果需要横向滚动，修改scrollLeft
fixedScrollContainer.scrollLeft = 500;

2. 使用元素原生的scrollTo()方法（推荐） #

现代浏览器里，DOM元素本身就自带了scrollTo()方法，用法和window.scrollTo()几乎完全一样，甚至支持平滑滚动的配置！直接作用在你的固定容器上就行：

// 基础用法：滚动到x=0，y=1000的位置
fixedScrollContainer.scrollTo(0, 1000);

// 带配置的平滑滚动
fixedScrollContainer.scrollTo({
  top: 1000,
  left: 0,
  behavior: 'smooth' // 可选'auto'（默认）或'smooth'
});

这个方法完美替代window的scrollTo，完全适配你的固定滚动容器。

3. （不推荐）重写window的scroll/scrollTo方法 #

如果你因为某些特殊需求，必须让window.scroll()或window.scrollTo()“看起来”作用于这个固定容器，可以重写全局方法，但要注意这可能影响其他依赖全局滚动的代码：

// 先保存原生方法，避免覆盖后无法恢复
const originalScrollTo = window.scrollTo;
const fixedScrollContainer = document.getElementById('your-fixed-div-id');

// 重写window.scrollTo
window.scrollTo = function(optionsOrX, y) {
  // 这里可以自定义判断逻辑，比如只有在特定场景下才作用于固定容器
  if (fixedScrollContainer) {
    if (typeof optionsOrX === 'object') {
      // 处理带配置参数的情况
      fixedScrollContainer.scrollTo(optionsOrX);
    } else {
      // 处理x,y参数的情况
      fixedScrollContainer.scrollTo(optionsOrX, y);
    }
  } else {
    // 如果没有固定容器，调用原生方法
    originalScrollTo.apply(window, arguments);
  }
};

// 同理可以重写window.scroll
const originalScroll = window.scroll;
window.scroll = function(optionsOrX, y) {
  if (fixedScrollContainer) {
    if (typeof optionsOrX === 'object') {
      fixedScrollContainer.scrollTo(optionsOrX);
    } else {
      fixedScrollContainer.scrollBy(optionsOrX, y); // 注意scroll是相对滚动，用scrollBy更准确
    }
  } else {
    originalScroll.apply(window, arguments);
  }
};

最后补充一句：你提到的scrollIntoView()能正常工作，是因为它是目标元素自身的方法，它会自动找到最近的滚动容器（也就是你的固定div），然后把元素滚动到该容器的可视区域内，所以完全适配你的场景~

内容的提问来源于stack exchange，提问作者Kaan KÜÇÜK