如何在无限滚动上附加元素而不阻塞滚动动画答案

【问题标题】：How to append elements on infinite scroll without blocking scroll animation如何在无限滚动上附加元素而不阻塞滚动动画
【发布时间】：2018-08-30 22:53:57
【问题描述】：

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

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 以使滚动保持流畅？

【问题讨论】：

如何附加 DOM 滚动事件？请发布更多上下文的示例代码
你试过用element.appendChild代替element.innerHTML吗？
@JoshuaManns 编辑以包含听众

标签： javascript html dom browser dom-events

【解决方案1】：

由于不断调用“滚动”，您正在与浏览器性能作斗争，这很昂贵。在处理浏览器滚动时，请考虑使用debounce 函数而不是您的常规匿名 fn。 See this accepted answer for more information on debouncing:

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

【讨论】：