捕获滚轮事件的DIV中scrollTo函数失效，求助原因及解决

可能的原因及解决方案 #

1. 直接设置scrollTop替代scrollTo

scrollTo有时会因浏览器滚动上下文或事件队列优先级问题失效，直接修改scrollTop的方式更可靠：

function smoothScroll(e: WheelEvent & { currentTarget: HTMLDivElement }) {
    e.preventDefault();
    console.log(container.scrollHeight);
    container.scrollTop = 3500; // 直接赋值滚动位置
}

2. 用requestAnimationFrame包裹scrollTo调用

将滚动操作放到下一帧执行，避免与浏览器原生滚轮事件的处理逻辑冲突：

function smoothScroll(e: WheelEvent & { currentTarget: HTMLDivElement }) {
    e.preventDefault();
    console.log(container.scrollHeight);
    requestAnimationFrame(() => {
        container.scrollTo(0, 3500);
    });
}

3. 确认容器的滚动有效性

虽然你已输出scrollHeight，但可以额外验证容器的滚动条件是否满足：

console.log('容器可视高度:', container.clientHeight);
console.log('容器内容总高度:', container.scrollHeight);
console.log('垂直滚动设置:', getComputedStyle(container).overflowY);

需要确保clientHeight < scrollHeight，且overflowY为scroll或auto。

4. 排查其他代码干扰

检查页面中是否存在其他监听滚动事件的代码、防抖节流逻辑，或者CSS的scroll-behavior: smooth属性——这些都可能覆盖你手动设置的滚动位置。

核心原因说明 #

在滚轮事件回调中直接调用scrollTo时，浏览器的原生滚动处理逻辑可能仍在执行队列中，即便调用了preventDefault，也可能与主动滚动操作产生冲突。使用requestAnimationFrame或直接赋值scrollTop，可以避开这种冲突，确保滚动操作生效。

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