Невозможно установить scrollTop для HTMLElement в useEffect без функции тайм-аута

Question

У меня есть компонент текстового журнала, который я хочу прокручивать до самого низа всякий раз, когда он получает новую запись в журнале, поэтому я должен установить для scrollTop родителя значение scrollHeight в useEffect(). Однако это не имеет никакого эффекта:

const Log = ({ entries }: LogProps) => {
    const logRef = useRef<HTMLDivElement>(null);
    useEffect(() => {
        if (logRef && logRef.current) {
            let parent = logRef.current.parentNode as HTMLDivElement
            parent.scrollTop = parent.scrollHeight;
        }
    })
    return (
        <Module className="log" title="Text Log">
            <div ref={logRef} className="log__entries">
                ...
            </div>
        </Module>

    )
}

Этот код, с другой стороны, работает:

...
useEffect(() => {
    if (logRef && logRef.current) {
        let parent = logRef.current.parentNode as HTMLDivElement
        setTimeout(() => {
            parent.scrollTop = parent.scrollHeight;
        }, 100)
    }     
})
...

На моей машине я могу установить тайм-аут всего 39, и он буду работать последовательно. Нижние числа имеют успех c. Предположительно, это число будет варьироваться в зависимости от показателя производительности c, но я понятия не имею.

Ведение журнала консоли показывает, что ссылка существует, и она имеет высоту, достаточную для прокрутки к моменту запуска useEffect(). Регистрация до и после parent.scrollTop = parent.scrollHeight; показывает, что scrollTop не меняется.

Не понимаю ли я, как работает useEffect(), это потому, что я устанавливаю родительский scrollTop, или есть что-то еще? Я скучаю?

Answer 1

Вы можете сделать это, внеся несколько изменений:

useEffect(() => {
  logRef.current.scrollIntoView({ behavior: 'smooth', block: 'end' })
}, [entries])

Список браузеров, поддерживающих функцию scrollIntoView, можно увидеть на Документах Mozilla . Если вы хотите, чтобы больше браузеров поддерживали, вы можете установить этот крошечный npm пакет, называемый smoothscroll-polyfill .