添加元素滚动不到底部时操作

例如添加一条选项使用

  parentElement.scrollTop = parentElement.scrollHeight;

他就滚动不到底部直接把D埋没了

如何解决呢找到一种方法：

     // 等待下一次渲染循环
      requestAnimationFrame(() => {
        // 将父级元素滚动到底部
        parentElement.scrollTop = parentElement.scrollHeight;
      });

加上这个方法就滚动到底部了

二 .不过这个方法是干什么的呢？

requestAnimationFrame是一个由浏览器提供的用于在下一次重绘之前执行回调函数的方法。它是优化动画和其他需要高性能的操作的常用方式。

使用requestAnimationFrame可以确保在浏览器进行下一次重绘之前执行滚动操作，以获得最佳的性能和平滑度。

以下是requestAnimationFrame的基本用法：

requestAnimationFrame(callback);

其中，callback是要在下一次重绘时执行的回调函数。该函数会接收一个时间戳作为参数，表示回调开始执行的时间。

示例用法如下所示：

扫描二维码关注公众号，回复： 16916630 查看本文章

requestAnimationFrame(function(timestamp) {
  // 在这里执行需要在下一次重绘时进行的操作
});

在我们之前的代码示例中，我们将滚动到底部的代码包装在requestAnimationFrame的回调函数中，以确保在下一次渲染循环中执行滚动操作。

请注意，requestAnimationFrame的兼容性较好，但在旧版本的浏览器中可能不支持。因此，在使用requestAnimationFrame时，最好检查浏览器是否支持或提供替代方案来处理不支持的情况。

三 .那么我又想他跟settimeout的区别在哪呢

requestAnimationFrame 和 setTimeout 是两个不同的方法，用于实现在特定时间间隔内执行回调函数的操作。它们有一些区别和适用场景。

调用频率：
- setTimeout 方法允许您设置回调函数在指定的延迟时间后执行，但具体何时执行取决于浏览器当前的事件循环和可用资源。该方法的准确性可能会受到影响。
- requestAnimationFrame 方法会在浏览器每次重绘之前调用回调函数，通常是每秒60次，以保持动画平滑。浏览器会根据自身的刷新率来优化性能。
性能和节能：
- setTimeout 在指定的延迟时间过去后才执行回调函数，这可能导致不必要的计算和绘制，尤其是在页面处于隐藏或未激活状态时。
- requestAnimationFrame 则通过浏览器的渲染循环来调度回调函数的执行，以确保在最佳时机进行绘制并提供更好的性能和节能效果。
动画效果：
- requestAnimationFrame 通常用于实现动画效果，因为它与浏览器的刷新率同步，避免了跳帧和撕裂等问题。
- setTimeout 也可用于动画效果，但由于其执行时间的不确定性，可能会导致动画不连贯或出现问题。

综上所述，如果您需要实现动画效果或在下一次重绘前执行操作，推荐使用 requestAnimationFrame。而对于普通的延迟执行操作，setTimeout 是一个更常见的选择

四：tips

**** 添加条目无非就是写一个obj 里边包含其他属性然后push进那个原数组(需要添加条目的数组)