时间戳

首页 > 解决方案 > 使用“滚动到底部”加载组件在滚动条位于顶部然后向下时显示 1 帧

javascript - 使用“滚动到底部”加载组件在滚动条位于顶部然后向下时显示 1 帧

问题描述

我正在尝试加载一个可在开始时使用底部的滚动条滚动的组件。但是在 1 帧中，您可以看到该组件在顶部加载了滚动条，然后它下降了。我只想毫不拖延地将滚动条放在底部，因为这对用户体验很烦人

HTML：

<div ref={chatScrollRef} className={styles.contentWrapper}>
  <div className={styles.contentWrapper__content}/>
</div>

CSS：

.contentWrapper {
  flex: 1;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
    
  &__content {
    width: 100%;
    height: 1000%;
    position: absolute;
    background-image: linear-gradient(to bottom right, red, yellow);
  }
}

JAVASCRIPT：

useEffect(() => {
  setTimeout(() => {
    chatScrollRef.current.scrollTo({ top: chatScrollRef.current.scrollHeight });
    // chatScrollRef.current.scrollIntoView({ behavior: 'smooth' })
  }, 0)
}, [])

** "scrollTo" 包含在 setTimeOut 中，以便在尽可能短的延迟后运行它。还是不行

问题视图

** 请注意，div 从上到下有一个渐变，从红色到黄色，在第 0 秒时查看 div 是如何变为红色的，然后变为黄色。

标签： javascriptreactjsscroll

解决方案

您的问题有两种解决方案：

  1. 您可以使用flex-direction: column-reverse;which 使 div 中的所有子项反转，并且滚动将在 div 的“末尾”自动启动。
  2. 或者你可以研究react-infinite-scroller库，它支持无限加载内容和反向列表。

推荐阅读