onScroll event not firing in react js, what am i doing wrong

Shiv Shankar Prasad 0
Viewed 45

My onScroll event is not firing in react js.

I am trying to set infinite scrolling in react js , but my onScroll event is not firing away.

it fetches posts from api and send it to the Post component. and i am rendering the post in the Post component.

Feed.js

import { Box } from "@mui/material";
import Post from "./Post";
import About from "./About";
import { useEffect, useState } from "react";
import { getInfiniteScroll } from "../apis/posts";

const Feed = () => {
  const [data, setData] = useState([]);
  const [skip, setSkip] = useState(0);

  useEffect(() => {
    fetchPosts();
    document
      .getElementById("scroll_div")
      .addEventListener("scroll", handleScroll, true);

    // Remove the event listener
    return () => {
      document
        .getElementById("scroll_div")
        .removeEventListener("scroll", handleScroll, true);
    };
  }, [skip]);

  const fetchPosts = async () => {
    try {
      const newPosts = await getInfiniteScroll(skip);

      setData(newPosts);
    } catch (error) {
      console.log(error.message);
    }
  };

  const handleScroll = (e) => {
    const { offsetHeight, scrollTop, scrollHeight } = e.target;
    console.log(e.target);

    if (offsetHeight + scrollTop >= scrollHeight) {
      setSkip(data?.length);
    }
    console.log(skip);
  };

  return (
    <Box
      flex={4}
      sx={{ padding: { xs: "0", sm: "0px 20px " }, overflow: "auto" }}
      onScroll={handleScroll}>
      <Post post={data} />
      <Box
        sx={{
          display: { sm: "none", xs: "block" },
          justifyContent: "center",
          alignItems: "center",
          paddingBottom: "50px",
        }}>
        <About />
      </Box>
    </Box>
  );
};

export default Feed;

Please help !!

mui5 reactjs javascript
1 Answers

I don't know if onScroll is supported by material's Box component. What you can instead do is use refs

function App() {
  const ref = useRef()

  useEffect(() => {
    const handleScroll = (e) => {
      // Do your stuff here
    };
    
    ref.current?.addEventListener("scroll", handleScroll);
    return () => ref.current?.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <Box ref={ref} />
  );
}
vighnesh1530
Related