scrollIntoView to apply to IFRAME only

I have an element inside of a page with scollbars, which is brought into view on page load via JS call to element.scrollIntoView() - and this works fine, as expected.

Now, if I place this page into an IFRAME, the call to element.scrollIntoView() not only brings element inside of iframe to the top of iframe - if the parent page has scrollbars of its own - it scroll the parent page as well to bring the element in question to the top of parent page as well.

I understand this is probably behavior by design, but is there a way to contain "scrollIntoView" behavior to the IFRAME only, or are there any alternatives to have this behavior (without affecting the parent page).

How do I scroll with an iframe?

To scroll an iframe with JavaScript, we can use the scrollTo method. const myIframe = document. getElementById("iframe"); myIframe. onload = () => { myIframe.

When should I use scrollIntoView?

The scrollIntoView() method scrolls an element into the visible area of the browser window.

Figured it out. I can set element's parent's scrollTop to element's own offsetTop. This will make parent scroll to element's position and effect will be local to IFRAME.