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?
S
Sniberb275d 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
UU
Unknown User273d ago