加载可滚动组件时滚动条初始在顶部闪1帧才滚动到底部如何解决

原实现出现1帧顶部内容闪烁，是因为setTimeout属于浏览器宏任务，执行时机晚于首次渲染的布局、绘制流程，第一帧已经将滚动容器顶部内容渲染到屏幕后，才会触发滚动逻辑，因此会出现可见的跳变。

方案1：使用useLayoutEffect（React场景最优解） #

useLayoutEffect的执行时机在React完成DOM更新后、浏览器绘制新帧之前，滚动操作会在首帧绘制前完成，完全不会出现中间状态。
修改JS代码如下：

import { useLayoutEffect, useRef } from 'react';

// 组件内逻辑
const chatScrollRef = useRef(null);

useLayoutEffect(() => {
  const scrollEl = chatScrollRef.current;
  if (scrollEl) {
    scrollEl.scrollTo({
      top: scrollEl.scrollHeight,
      behavior: 'instant'
    });
  }
}, []);

方案2：双requestAnimationFrame实现（通用JS场景） #

如果无法使用useLayoutEffect，可以通过两次requestAnimationFrame保证滚动在DOM布局完成后、绘制前执行，需添加清理逻辑避免内存泄漏：

useEffect(() => {
  let rafId1, rafId2;
  rafId1 = requestAnimationFrame(() => {
    rafId2 = requestAnimationFrame(() => {
      const scrollEl = chatScrollRef.current;
      if (scrollEl) {
        scrollEl.scrollTo({ top: scrollEl.scrollHeight });
      }
    });
  });
  return () => {
    cancelAnimationFrame(rafId1);
    cancelAnimationFrame(rafId2);
  };
}, []);

方案3：纯CSS实现（无JS开销） #

直接通过CSS修改滚动容器的布局规则，让容器默认滚动起点处于底部，不需要额外JS逻辑：
修改CSS代码如下：

.contentWrapper {
  flex: 1;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
    
  &__content {
    width: 100%;
    height: 1000%;
    background-image: linear-gradient(to bottom right, red, yellow);
    /* 移除原position: absolute属性，使用正常流布局即可 */
  }
}

内容的提问来源于stack exchange，提问作者user12113809