如何在Firefox中立即设置滚动位置？解决循环滚动卡顿问题

问题背景 #

实现了一个循环滚动容器，当滚动位置超过300px时自动回到起始处。Chrome/Edge中跳转瞬间完成、过渡流畅，但Firefox中会出现不受控的平滑滚动效果（是否触发取决于滚动速度）。尝试过设置scrollTo的behavior: 'instant'和CSS的scroll-behavior属性，问题仍未解决。

原实现代码：

HTML #

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

CSS #

ul {height:200px; overflow-y:scroll;}
li {background:lightgrey; line-height:90px; margin-bottom:10px;}

JavaScript #

var list = document.querySelector('ul');

list.addEventListener('scroll', function() {
    if (list.scrollTop > 300) {
        list.scrollTop = 0;
    };
});

解决方法 #

方法1：临时禁用平滑滚动并同步设置滚动位置 #

Firefox的原生平滑滚动队列可能会覆盖scrollTop的即时设置，临时修改scroll-behavior可以中断这个队列，确保跳转瞬间完成：

var list = document.querySelector('ul');

list.addEventListener('scroll', function() {
    if (list.scrollTop > 300) {
        // 保存原scroll-behavior设置（若有）
        const originalBehavior = list.style.scrollBehavior;
        // 强制禁用平滑滚动
        list.style.scrollBehavior = 'auto';
        // 立即设置滚动位置
        list.scrollTop = 0;
        // 下一帧恢复原设置（可选，若原本无自定义设置可省略）
        requestAnimationFrame(() => {
            list.style.scrollBehavior = originalBehavior;
        });
    }
});

方法2：结合scrollTo与强制同步设置 #

部分Firefox版本中，单独使用scrollTo({behavior: 'instant'})可能仍被原生平滑滚动覆盖，额外添加scrollTop的同步设置可以确保效果：

var list = document.querySelector('ul');

list.addEventListener('scroll', function() {
    if (list.scrollTop > 300) {
        list.scrollTo({
            top: 0,
            behavior: 'instant'
        });
        // 强制同步滚动位置，绕过平滑滚动队列
        list.scrollTop = 0;
    }
});

方法3：改用wheel事件提前拦截 #

scroll事件在滚动发生后触发，此时Firefox可能已经启动平滑滚动动画；改用wheel事件在滚动动作开始前拦截，直接阻止默认滚动行为并重置位置：

var list = document.querySelector('ul');

list.addEventListener('wheel', function(e) {
    // 判断滚动后是否会超过阈值
    if (list.scrollTop + e.deltaY > 300) {
        // 阻止浏览器默认滚动行为
        e.preventDefault();
        // 立即重置滚动位置
        list.scrollTop = 0;
    }
});

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