例如 添加一条选项 使用
parentElement.scrollTop = parentElement.scrollHeight;
他就滚动不到底部 直接把D埋没了
如何解决呢 找到一种方法:
// 等待下一次渲染循环
requestAnimationFrame(() => {
// 将父级元素滚动到底部
parentElement.scrollTop = parentElement.scrollHeight;
});
加上这个方法就滚动到底部了
二 .不过 这个方法是干什么的呢?
requestAnimationFrame
是一个由浏览器提供的用于在下一次重绘之前执行回调函数的方法。它是优化动画和其他需要高性能的操作的常用方式。
使用requestAnimationFrame
可以确保在浏览器进行下一次重绘之前执行滚动操作,以获得最佳的性能和平滑度。
以下是requestAnimationFrame
的基本用法:
requestAnimationFrame(callback);
其中,callback
是要在下一次重绘时执行的回调函数。该函数会接收一个时间戳作为参数,表示回调开始执行的时间。
示例用法如下所示:
requestAnimationFrame(function(timestamp) {
// 在这里执行需要在下一次重绘时进行的操作
});
在我们之前的代码示例中,我们将滚动到底部的代码包装在requestAnimationFrame
的回调函数中,以确保在下一次渲染循环中执行滚动操作。
请注意,requestAnimationFrame
的兼容性较好,但在旧版本的浏览器中可能不支持。因此,在使用requestAnimationFrame
时,最好检查浏览器是否支持或提供替代方案来处理不支持的情况。
三 .那么 我又想 他跟settimeout的区别在哪呢
requestAnimationFrame
和 setTimeout
是两个不同的方法,用于实现在特定时间间隔内执行回调函数的操作。它们有一些区别和适用场景。
-
调用频率:
setTimeout
方法允许您设置回调函数在指定的延迟时间后执行,但具体何时执行取决于浏览器当前的事件循环和可用资源。该方法的准确性可能会受到影响。requestAnimationFrame
方法会在浏览器每次重绘之前调用回调函数,通常是每秒60次,以保持动画平滑。浏览器会根据自身的刷新率来优化性能。
-
性能和节能:
setTimeout
在指定的延迟时间过去后才执行回调函数,这可能导致不必要的计算和绘制,尤其是在页面处于隐藏或未激活状态时。requestAnimationFrame
则通过浏览器的渲染循环来调度回调函数的执行,以确保在最佳时机进行绘制并提供更好的性能和节能效果。
-
动画效果:
requestAnimationFrame
通常用于实现动画效果,因为它与浏览器的刷新率同步,避免了跳帧和撕裂等问题。setTimeout
也可用于动画效果,但由于其执行时间的不确定性,可能会导致动画不连贯或出现问题。
综上所述,如果您需要实现动画效果或在下一次重绘前执行操作,推荐使用 requestAnimationFrame
。而对于普通的延迟执行操作,setTimeout
是一个更常见的选择
四:tips
**** 添加条目无非就是 写一个obj 里边包含其他属性 然后push进那个原数组(需要添加条目的数组)