How do you prevent a iframe from scrolling it's parent document ?

So I have a React Application that uses Element.scrollIntoView to scroll to the bottom most "message bubble" in my UI (the application is a sort of chat app UI similar to Messenger, WhatsApp etc). I utilise a ref similar to the first image to do this. We render this "UI" in an iFrame on a separate widget via a HTML <dialog> element which is also owned by us. The Issue ## My issue is that when the scrollIntoview function is called, not only does it scroll the UI of the iFrame itself but it also scrolls the parent page (where the dialog and iframe is hosted as in the second image) P.S. This is my first posting an issue here so please be gentle if I've missed anything and I'll be more than happy to provide any additional details. I understand this might be a bit complicated but I'll try my best to clarify anything and everything i can