Прокрутите до y местоположения в пределах реагирующего элемента с помощью useRef

Question

У меня на странице есть компонент, который прокручивается, а остальные нет. Я хочу прокрутить до определенного местоположения Y в этом элементе, когда я изменяю значение useState, используя другой компонент.

const scrollMe = useRef();  

useEffect(
        () => {
                if (scrollMe === true) {
                    scrollPanel.scrollTo(0, 300)
                }

        },
        [ scrollMe ]
    );

Прокручиваемый компонент выглядит так:

 <div ref={scrollMe} onScroll={(e) => handleScroll(e)}>A mapped array</div>

Функция прокрутки выглядит следующим образом:

const handleScroll = (e) => {
    if (e.target.scrollTop !== 0) {
        setTopBarPosition(true);
    } else {
        setTopBarPosition(false);
    }
};

Настройка topBarPosition влияет на

<div className={`topBar ${topBarPosition === true ? 'topBarToTop' : ''}`}>
                    <TopBar/>
</div>

А класс topBarToTop css перемещает topBar в верхнюю часть страницы:

.topBarToTop {
    top: 30px;
}

Почему я просто получаю scrollMe.scrollTo не является функцией?

Я сделал кодовую коробку, которая иллюстрирует то, что я пытаюсь сделать:

https://codesandbox.io/s/react-hooks-counter-demo-izho9

Answer 1

Вам нужно внести небольшие изменения. Пожалуйста, следуйте коду комментарии :

  useEffect(() => {
    // swap the conditions to check for childRef first
    if (childRef && topPosition) {

      // use to get the size (width, height) of an element and its position
      // (x, y, top, left, right, bottom) relative to the viewport.
      const { y } = childRef.current.getBoundingClientRect()

      // You have to call `current` from the Ref
      // Add the `scrollTo()` second parameter (which is left)
      childRef.current.scrollTo(y, 0)

      // Initially it was set to `false` and we change it to `true` when click on scroll
      // button then we change it back to `false` when re-render 
      setTopPosition(false)

    }
  }, [topPosition, childRef])

Подробнее о getBoundingClientRect ()