Прокрутите вниз до ReactJS (крючки) - PullRequest
Новая
       7

Прокрутите вниз до ReactJS (крючки)

0 голосов
/ 01 апреля 2020

Я не могу достичь, чтобы у меня была полоса прокрутки внизу, когда я рендерил компонент чата. Я использую хуки, пытаюсь использовать scrollIntoView с ссылками, но не работает. Если я использую scrollTo, он работает, но когда компонент отображается, он начинается с верхней позиции, а затем автоматически появляется внизу. Но, как пользователь, вы на мгновение видите верхнюю часть компонента.

Код следующий (список сообщений смоделирован): 

  const chatList: any = useRef(null)

  useEffect(() => {
    const scrollHeight: any = document.getElementById("chatList")?.scrollHeight
    document.getElementById("chatList")?.scrollTo({
      top: scrollHeight,
      behavior: 'auto'
    });
    // THIS IS NOT WORKING
    // document.getElementById("chatList")?.scrollIntoView({
    //   block: "end",
    //   behavior: 'auto'
    // });
  })


  const showMessages = (): any => {
    let previousWriter
    const renderMessages = []
    for (let i=0; i < messages.length; i++) {
      renderMessages.push(<div key={i}><MessageRow message={messages[i]} previousWriter={previousWriter}/></div>)
      previousWriter = messages[i].writer
    }
    return renderMessages
  }

  return (
    <div className={styles.chat}>
      <div className={styles.chat__content}>
        <div className={styles.content} id="chatList" ref={chatList}>
          {showMessages()}
        </div>
      </div>
      <ChatWriteBar/>
    </div>
  )
}

Спасибо очень заранее.

...