snowberb – 08-25 Jul 18

S⛄Snowberb⛄

7/18/2023

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? 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

UUUnknown User

7/19/2023

Message Not Public

Looking for more? Join the community!

Reactiflux

snowberb – 08-25 Jul 18

Join Server

Reactiflux

snowberb – 08-25 Jul 18

Join Server

Want results from more Discord servers?

Add your server

Recommended Posts

hoangvu12 – 06-57 Jul 17Hi, I'm developing a chrome extension for a web page, I want two way communication between webapp an pepega1337. – 15-15 Jul 12okay apparently im too stupid to make a snake game, how on this planet earth is this not working as rb_gaura – 14-09 Jul 11Is there a way in JS to avoid getting snapped by snap-stop always ✅ – ✅ – ✅ – rb_gaura – 22-20 Jul 10is there a way to detect scroll snapping in js?snowberb – 07-57 Jul 7Does someone know if there is any library that can parse a yaml file to TS? or how I could parse a y snowberb – 15-27 Jul 6can someone explain to me what this code does in like a really dumb way so everyone could understand