Keep scrolling position while other things are added on top of it.
Suppose I have three divs : parent tweets , tweet , children tweets . I come to the page and all tweets are fetched and I scroll to tweet immediately . However , parent tweets have some videos that take some time to load and when they are loaded the height of the parent tweets changes pushing down the postion where I initially scrolled (tweet ) . what I want to achieve is sth [like this ] ( https://vimeo.com/1110966785?share=copy#t=0 ) , where somehow the parent tweets do not push the other divs down but are added on top of them without changing the scrolling positions . I created a [sample page ] ( https://editor.nordcraft.com/projects/seno12/branches/start/components/test-scrolling?canvas-width=800&canvas-height=1202.3&selection=onLoad.actions.2.events.tick&rightpanel=style ) to illustrate it . I would not prefer to solve this using placeholders with a determinate height or getting the height of the video beforehand somehow as this seems too complicated and needs some database additions . and the example in the video seems to not use this anyway anyone has any idea how to solve this in nordcraft ? thanks Setting a CSS aspect ratio on the videos should fix this https://web.dev/articles/optimize-cls#images-without-dimensions If videos have different dimensions then it may be that you need to save that metadata in the database Using CSS aspect ratio instructs the browser to reserve space for content loading in (or adding height /width dimensions ) the backend being a good source of truth and with accurate data to avoid hacky front ends is always a winner 💯1
.jpeg/public)