Sniberb•13mo ago

snowberb – 08-25 Jul 18

Having an initially hidden element, if I use scrollIntoView() on that element after hitting a button, it only works after the element gets visible. How can I fix this?

2 Replies

Sniberb•13mo ago

I did also try adding a timeout but still doesnt work

export const useScrollBottom = <T extends Element>() => {
  const bottomRef = useRef<Element>(null);

  const scrollToBottom = () => {
    const element = bottomRef.current?.lastElementChild;

    element?.scrollIntoView({ behavior: 'smooth' });
  };

  return { bottomRef, scrollToBottom };
};

const Component = () => {
  const { bottomRef, scrollToLast } = useScrollBottom()
  const onClick = () => {
    doThings()
    scrollToBottom()
  }
  
  return (
    {condition && <div ref={bottomRef}></div>}
  )
}

export const useScrollBottom = <T extends Element>() => {
  const bottomRef = useRef<Element>(null);

  const scrollToBottom = () => {
    const element = bottomRef.current?.lastElementChild;

    element?.scrollIntoView({ behavior: 'smooth' });
  };

  return { bottomRef, scrollToBottom };
};

const Component = () => {
  const { bottomRef, scrollToLast } = useScrollBottom()
  const onClick = () => {
    doThings()
    scrollToBottom()
  }
  
  return (
    {condition && <div ref={bottomRef}></div>}
  )
}

I modified the code to change it for a useEffect that listens to a useState change, and on the component I change the useState prop in another useeffect after the condition is true this way works

reactibot•13mo ago

This thread hasn’t had any activity in 36 hours, so it’s now locked. Threads are closed automatically after 36 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/565213527673929729/1130777267581227039