I've always wondered why people removed parts of the page when they were scrolled out. Like, don't you think the browser would already optimize for that? And even if it's not stored in the DOM, it's still being stored in the JavaScript's memory. It's frustrating when people try to reimplement optimizations that the browser already does better.
The browser does not in fact optimize that. Yes it's surprising. If you want it to do basic optimizations like not rendering invisible content you need to give it hints via obscure and relatively recent CSS rules nobody ever heard of.