Почему strokeoffset не работает?

Question

[Alexander3928]

Почему не добавляются стили strokeDashoffset? circleRef.current.style.strokeDashoffset = dashoffset

export function ScrollToTop() {
  const circleRef = React.useRef(); 
  
  React.useEffect(() => {
    const circleLength = circleRef.current.getTotalLength();

    window.addEventListener("scroll", () => {
      const getSctollTop = () => {
        return window.pageYOffset || document.documentElement.scrollTo;
      }

      const updateDashoffset = () => {
        const heigth = document.documentElement.scrollHeight - window.innerHeight;
        const dashoffset = circleRef.current - (getSctollTop() * circleLength / heigth);

        circleRef.current.style.strokeDashoffset = dashoffset
      };
      updateDashoffset()
    });

  }, []);


  return (
      <svg onClick={isStart} width="50" height="50" viewBox="0 0 50 50" className={styles.circle_svg}>
        <circle ref={circleRef} cx="25" cy="25" r="23.5" fill="none"/>
      </svg>
  )
}

Answer 1

[0xD34F]

const dashoffset = circleRef.current - ...

Вычитаете из элемента? Умно. Конечно, в том случае, если вашей целью является получение NaN.

const getSctollTop = () => {
  return window.pageYOffset || document.documentElement.scrollTo;
}

А точно scrollTo? Это же метод, а вы вроде бы число хотите получить. Может, scrollTop?

React.useEffect(() => {
  ...
  window.addEventListener("scroll", () => {
    ...
  });

}, []);

Почему нет очистки эффекта?

Comments

[Alexander3928]

Спасибо. Не заметил, что указал нету сонстанту.