scrollIntoView to apply to IFRAME only

Question

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).

Answer 1

The above solution will indeed work but you wouldn't be able to apply smooth scrolling behaviour. Ran into the same issue and figured you can actually fix by using scrollTo, and then you'd be able to add a smooth scrolling.

Assuming container, and element are respectively the DOM elements for the fixed size container and the element you want to scroll to:

container.scrollTo({
    top: element.offsetTop,
    behavior: 'smooth',
  })

It's then up to you to choose whether you want to get the given DOM elements using jQuery or references.

Answer 2

I had a similar problem, element.scrollIntoView() in an iframe was causing the parent page to scroll on my iPad / Safari

I put the following script in the iframe, around the scrollIntoView to fix:

var savTop=parent.document.documentElement.scrollTop;
document.getElementById('elementID').scrollIntoView();
parent.document.documentElement.scrollTop=savTop;

Answer 3

How about this:

window.parent.scrollTo(0,0);