UI moves when I put a ref in a Box/div

Question

I have the following code:

and it looks like this:

I need to add a div with a reference inside it:

And if I do so, all the UI moves up. See this picture:

I realized this happens only when I add the ref attribute to the div. Can anyone help me understand why this is happening?

Answer 1

you can do that easily by using scrollTop property, find scrollable element and set scrollTop to 0, document.getElementById('#eampleScrollableDiv').scrollTop = 0