Блог

Я пытаюсь использовать положение прокрутки для своих анимаций в моем веб-портфолио. Поскольку в этом портфолио используется NextJS, я не могу полагаться на объект window, плюс я использую навигационный ползунок, поэтому я фактически прокручиваю не в окне, а в компоненте макета под названием Page .

 import React, { useEffect } from 'react';
import './page.css';

const Page = ({ children }) => {

  useEffect(() => {
    const scrollX = document.getElementsByClassName('page')
    const scrollElement = scrollX[0];
    console.log(scrollX.length)
    console.log(scrollX)
    scrollElement.addEventListener("scroll", function () {
      console.log(scrollX[0].scrollTop)
    });
 
    return () => {
      scrollElement.removeEventListener("scroll", () => { console.log('listener removed') })
    }
  }, [])


  return <div className="page">{children}</div>;
};

export default Page;
 

Вот производственная сборка: https://next-portfolio-kwn0390ih.vercel.app /

При загрузке в DOM есть только один компонент страницы.

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

• первый прослушиватель добавляется при первом монтировании страницы, при навигации также добавляется прослушиватель вместе с новым компонентом страницы в DOM.
• пока вы перемещаетесь между двумя страницами, новый слушатель / страница не добавляется
• при переходе на третью страницу прослушиватель затем удаляется, когда старая страница отключается, а новый прослушиватель для третьей страницы добавляется при монтировании третьей страницы (и т. Д.)

Проблема в том, что при переходе от первого ко второму все выглядит нормально, но если вы вернетесь на первую страницу, вы заметите, что консоль регистрирует значение scrollX второго прослушивателя вместо первого. Каждый раз, когда вы переходите на вторую страницу, кажется, что он добавляет другого слушателя к тому же элементу прокрутки, даже если это не тот же компонент страницы.

Как я могу это сделать? Я предполагаю, что два компонента пытаются получить доступ к одному и тому же элементу прокрутки :/

Спасибо за ваше время.

Классный сайт. У нас нет полной информации, но я подозреваю, что есть проблема с попыткой использования document.getElementsByClassName('page')[0] . Когда вы переходите на страницу 2, журнал для scrollX выдает HTMLCollection с 2 элементами. Итак, есть проблема, на которую нацелен. Я бы подумал об использовании ссылок вместо этого. Вот так:

 import React, { useEffect, useRef } from 'react';
import './page.css';

const Page = ({ children }) => {

  const pageRef = useRef(null)

  const scrollListener = () => {
    console.log(pageRef.current.scrollTop)
  }

  useEffect(() => {
    pageRef.addEventListener("scroll", scrollListener );
 
    return () => {
      pageRef.removeEventListener("scroll", scrollListener )
    }
  }, [])


  return <div ref={pageRef}>{children}</div>;
};

export default Page;
 

Это намного чище, и я думаю, это уменьшит путаницу между компонентами в отношении того, на какой элемент dom ссылается для каждого прослушивателя прокрутки. Что касается третьей страницы, вы scrollX по-прежнему регистрируете ту же коллекцию HTMLElement, состоящую из 2 элементов. Согласно вашему шаблону, их должно быть 3. (Хотя на самом деле должно быть только 1!) Итак, что-то не отображается должным образом на странице 3.
Если мы увидим больше кода, это может выявить ошибку как нечто другое. Если ссылки не решают эту проблему, можете ли вы опубликовать, как Page это реализовано в более широком диапазоне вещей?

^{кроме того, удалите «младший» из названия «младший разработчик» — вы не пожалеете об этом}