Question

我有一个UL，如果用户滚动超过给定的阈值，它会动态地将元素添加到底部。但是，当创建元素时，则附加（vanilla js style，即：

container.innerHTML = container.innerHTML + newHtmlString;

）

但是，这样做会使滚动跳跃，因为我假设修改DOM就像阻止滚动动画/事件触发一样。

滚动事件的附加方式如下：

//scrollableList is a jquery element
this.scrollableList.on('scroll', e => {
    /*
    function that handles checking where 
    scroll position is and appending
    */
 })

有没有办法改变/附加到HMTL以使滚动保持平滑？

Answer 1

由于不断调用“滚动”卷轴，您正在努力解决浏览器性能问题。在处理浏览器滚动时，请考虑使用debounce函数而不是常规匿名fn。 See this accepted answer for more information on debouncing：

此外，您应该使用el.appendChild而不是el.innerHtml来阻止完整重绘DOM，这样可以节省一些周期。

如何在无限卷轴上追加元素而不阻止滚动动画

1 个答案: