venus•3y ago

venus – 14-11 Aug 22

Hello. I want to set state on true when is user scrolled on top/bottom, but I want to avoid re-rendering whole component on each scroll. What would you recommend me to do?

const [isReached, setIsReached] = useState({ top: false, bottom: false });

<div
  onScroll={(e: any) => {
    const top = e.target.scrollTop === 0;
    const bottom =
      e.target.scrollHeight - e.target.scrollTop ===
      e.target.clientHeight;

    setIsReached({ bottom: bottom, top: top });
  }}
/>

const [isReached, setIsReached] = useState({ top: false, bottom: false });

<div
  onScroll={(e: any) => {
    const top = e.target.scrollTop === 0;
    const bottom =
      e.target.scrollHeight - e.target.scrollTop ===
      e.target.clientHeight;

    setIsReached({ bottom: bottom, top: top });
  }}
/>

2 Replies

Unknown User•3y ago

Message Not Public

reactibot•3y ago

This thread hasn’t had any activity in 12 hours, so it’s now locked. Threads are closed automatically after 12 hours. If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/902647189120118794/1011276348326686832