how to scroll to previous state of infinite list?

Question

my way is storing yOffset then use window.scrollby() when component re-render but it doesn't work.

method for storing and get value from sessionStorage

my state

  const [users, setUsers] = useState([]);
  const [pageNumber, setPageNumber] = useState(1);
  const [hasMore, setHasMore] = useState(true);

  useEffect(()=>{
    const handleGetPreviousOffset = () => {
      const scrolledIndex = sessionStorage.getItem("scrolledIndex")
      scrolledIndex &&  window.scrollBy(0,scrolledIndex)
    };
    handleGetPreviousOffset()
  },[])

  useEffect(() => {
    const handleScroll = () => {
      sessionStorage.setItem("scrolledIndex",window.scrollY)
    };
    window.addEventListener("scroll", handleScroll);

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

method for get list from server

const handleFindingUser = async () => {
    setPageNumber((prevState) => prevState + 1);
    const findingCondition = {
      userId: "1",
      height: 160,
      userGender: "Girl",
      age: 25,
      coordinates: [106.70911015078109, 10.920765741379807],
      distance: 100000,
      hobbies: "61a88a564f32ef06a8dfb159",
      pageNumber,
    };

    const users = await dispatch(findingUser(findingCondition, pageNumber));
    switch (true) {
      case users.payload.data.users.length > 0: {
        setUsers((prevState) => {
          return ([...prevState, ...users.payload.data.users]);
        });
        setHasMore(true);
        break;
      }
      case users.payload.data.users.length === 0 ||
        users.payload.data.users.length < 20: {
        setHasMore(false);
        break;
      }
      default:
        break;
    }
  };
  useEffect(() => {
    handleFindingUser();
  }, []);

finally,i use infinite list library

<InfiniteScroll
            dataLength={users.length} //This is important field to render the next data
            next={handleFindingUser}
            hasMore={hasMore}
            loader={<h4>Loading...</h4>}
            endMessage={
              <p style={{ textAlign: "center" }}>
                <b>Yay! You have seen it all</b>
              </p>
            }
          >
            {users.map((user) => {
              return (
                <div
             
                  key={user.userId}
                  id={user.nickName}
                  className="d-flex"
                  style={{ margin: 12 }}
                >
                  <p>{user.nickName}</p>
                </div>
              );
            })}
          </InfiniteScroll>

i can see handleGetPreviousOffset function was call but i don't know why window.scrollBy() still not work, i missing something? have a nice day, everyone!

Answer 1

You can save the offset, but a better way is using hash in the URL (by id) and save it in localstorage or (sessionStorage), when you are done remove it. Refer to this for more information.