javascript - 如何获取我滚动到的 div 的 ID？

Question

我想获取滚动到的每个 div 的 ID 并将 ID 保留在我的状态中。

我有一些 div 元素的列表。我希望在我的状态中存储我滚动到的 div 的当前 ID。

我的代码

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>
    </>
  );
}

因此，当我滚动到第一个 div 时，我想将其存储在 currentId 状态 div-1 中，滚动到第二个 div-2等等。

Answer 1

你可以这样做:

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)
    }
},[])