Sprawdzanie położenia elementu DOM względem scrolla

Question

Cześć, mam w swojej aplikacji navbar, którego elementami są linki do kotwic (po id) na tej samej stronie. 
Chcę zmieniać styl linku w navbarze, którego odnośnik prowadzi do elementu DOM obecnie będącego mniej więcej od połowy ekranu w dół.
Generalnie udało mi się to zrobić i wszystko działa, jednak nie mogę patrzeć na taki zestaw if else'ów. Czy można to zrobić jakoś prościej/lepiej ?

Póki co pobieram sobie w funkcji handleScroll odpowiednie elementy DOM po id i staram się wyłapać kiedy elementy te są mniej więcej w połowie scrollowanej strony.

Aplikację piszę używając gatsby.js.

Kod :

const [activeSection, setActiveSection] = useState("about");

  const handleScroll = (event) => {
    const about = document.querySelector("#about").getBoundingClientRect();
    const technologies = document
      .querySelector("#technologies")
      .getBoundingClientRect();
    const experience = document
      .querySelector("#experience")
      .getBoundingClientRect();
    const projects = document
      .querySelector("#projects")
      .getBoundingClientRect();

    // check the #about
    if (about.height / 2 - 200 <= about.y * -1) {
      //check the #technologies
      if (technologies.height / 2 - 200 <= technologies.y * -1) {
        //check the #experience
        if (experience.height / 2 - 200 <= experience.y * -1) {
          //check the #projects
          if (projects.height / 2 - 200 <= projects.y * -1) {
          } else {
            setActiveSection("projects");
          }
        } else {
          setActiveSection("experience");
        }
      } else {
        setActiveSection("technologies");
      }
    } else {
      setActiveSection("about");
    }
  };

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

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

 

Answer 1

Trzeba by użyć pętli. Zrobiłem zmiany w ciemno i musiałem odwrócić warunek więc nie wiem czy zadziała. Jeśli nie zadziała może łatwiej będzie odwrócić kolejność elementów w tablicy lub zmienić nieco warunek.

Co do samego kodu warto aby funkcja handleScroll była w środku useEffect dzięki temu funkcja będzie stworzona tylko gdy będzie użyta. Obecnie funkcja tworzy się na nowo przy każdym renderowaniu komponentów. 

Dodatkowy problem to czas wykonywania getBoundingClientRect ta funkcja aby zwrócić wynik musi obliczyć wszystko na nowo i ponownie wyrenderować stronę. Informacje o pozycjach są tracone po skończeniu renderowania. Powinniśmy jej unikać. Warto zastanowić się czy przepisanie tego na https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver nie było by dobrym pomysłem. 

Ewentualnie można się zastanowić nad zapisywaniem w useRef() wszystkich wartości raz i podczas scrolla nie wywoływać getBoundingClientRect za każdym razem. Można też pokusić się o jakiś debounceTime dla handlera obsługującego event scrolla. 

const [activeSection, setActiveSection] = useState("about");
 
useEffect(() => {
    const handleScroll = () => {

        const elementsId = [
            "about",
            "technologies",
            "experience",
            "projects",
        ];

        const elements = elementsId.map(id => document.getElementById(id))

        for (let i = 0; i < elements.length; i++) {
            const element = elements[i];
            const rect = element.getBoundingClientRect();

            if (!(rect.height / 2 - 200 <= rect.y * -1)) {
                setActiveSection(elementsId[i]);
                break;
            }
        }
    }

    window.addEventListener("scroll", handleScroll);

    return () => {
        window.removeEventListener("scroll", handleScroll);
    };
}, []);