javascript - 使用 chrome 和平滑滚动时出现奇怪的滚动行为

Question

我正在编写一个虚拟滚动库并遇到一个奇怪的问题，该问题仅出现在 chrome 中并在 chrome 标志中禁用平滑滚动修复它。逻辑的一部分是使用不可见的 div 来拉伸(stretch)容器，当滚动到顶部时，获取一些新数据然后滚动回旧顶部。但是，在平滑滚动的 chrome 中，似乎不会立即应用对 scrollTop 的更改，因此会获取多个数据并且滚动位置错误。

我在 Linux 上使用 chrome 84.0.4147.105-1，并在 Windows 上进行了测试，结果相同。有时可能很难触发，最安全的方法是在不触发抓取的情况下将滚动条拖动到顶部附近并向上滚动。然后你会发现控制台值从 0 跳到 900(向下滚动)到一个小数字(为什么？)并再次触发提取

const container = document.getElementById('container')
const scroller = document.getElementById('scroller')

let height = 0
let isFetching = false
const fetchData = h => {
    if (isFetching) return
    isFetching = true
    setTimeout(() => {
        height += h
        scroller.style.height = height + 'px'
        container.scrollTop += h
        isFetching = false
    }, 50)
}

fetchData(800)

container.addEventListener('scroll', ev => {
    const top = ev.target.scrollTop
    console.log(top)
    if (top <= 50) {
        fetchData(800)
    }
})

#container {
    height: 200px;
    width: 500px;
    background-color: blue;
    overflow: auto;
}

#scroller {
    width: 100%;
}

<div id="container">
     <div id="scroller"></div>
</div>

Answer 1

一个临时的(并且非常不雅观)修复正在将 fetchData 更改为

const fetchData = h => {
    if (isFetching) return
    isFetching = true
    setTimeout(() => {
        height += h
        scroller.style.height = height + 'px'
        container.scrollTop += h
        isFetching = false
        setTimeout(() => container.scrollTop += h, 200)
    }, 50)
}

短暂延迟后再次滚动