3

I want to get the ID of every div that I scroll to and keep the ID in my state.

I have a list of some div elements. I expect to store in my state the current ID of the div that I scroll to.

My code

import React, { useEffect, useState } from "react";

export default function App() {
  const [currentId, setCurrentId] = useState(null);

  useEffect(() => {
    // some code here
  }, []);

  return (
    <>
      <div style={{ height: 600, background: "#d7a1a1" }} id="div-1">
        <h1>div 1</h1>
      </div>
      <div style={{ height: 600, background: "#d7a1a1" }} id="div-2">
        <h1>div 2</h1>
      </div>
      <div style={{ height: 600, background: "#d7a1a1" }} id="div-3">
        <h1>div 3</h1>
      </div>
      <div style={{ height: 600, background: "#d7a1a1" }} id="div-4">
        <h1>div 4</h1>
      </div>
      <div style={{ height: 600, background: "#d7a1a1" }} id="div-5">
        <h1>div 5</h1>
      </div>
    </>
  );
}

So when I scroll to the first div I want to store in currentId state div-1, to the second the div-2 and so on.

isherwood
  • 58,414
  • 16
  • 114
  • 157
dor.co
  • 43
  • 5
  • I see what you want. So mainly you need to get the scroll position and trigger the `useEffect()` depending on the vertical position and `setState` accordingly. Did I get it right? – Gass Apr 26 '22 at 18:41
  • hey Gass, yes. I know how to get the position from top to current location in window, but cant find out how to get the correct id by triggered. – dor.co Apr 26 '22 at 18:55

1 Answers1

1

You can do something like so:

const [currentId, setCurrentId] = useState(null)
const [scrollPos, setScrollPos] = useState(0)

useEffect(() => {
    window.addEventListener('scroll', setScrollPos(window.pageYOffset))

    if(scrollPos <= 600) setCurrentId('div-1')
    else if(scrollPos > 600 && scrollPos <= 1200) setCurrentId('div-2')
    else if(scrollPos > 1200 && scrollPos <= 1800) setCurrentId('div-3')
    // and so ....

    return () => {
        window.removeEventListener('scroll', handleScroll)
    }
},[])
Gass
  • 7,536
  • 3
  • 37
  • 41
  • hey, thank you for your answer. there is a way to get the id without define the heights (600, 1200, 1800...)? because I want it dynamically and that it will depend on the actual height of the div and not by a defined height. again thank you – dor.co Apr 26 '22 at 19:31
  • I'm thinking of a possible solution. You would have to get the `height` attribute of the div elements and set the conditions inside the `useEffect` accordingly. I've never done something like this, I'm speculating that it may work. – Gass Apr 26 '22 at 19:49
  • Take a look here https://stackoverflow.com/questions/35153599/reactjs-get-height-of-an-element – Gass Apr 26 '22 at 19:51
  • my problem with this solution is that there are specific cases where the solution will not work, for example, if in my page I have zoom in and zoom out buttons, the height of the div will not change but in relation to the screen it will no longer be 600, a situation that will cause that instead of for example getting the id of the first div I will get the id of the second div. – dor.co Apr 27 '22 at 06:08