javascript - scrollIntoView to apply to IFRAME only

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

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

@Cameron thanks! I do these posts so if anybody encounter similar problem could find solutions. Linked it from here as well just in case. – Yuriy Galanter Feb 28, 2016 at 16:21 This is really sad. Chrome seems to do the correct thing and only scroll inside the iframe. Firefox (v62 ATM) does not and neither does Safari (11.1.1) which means any iframe has control over the entire page. In other words any random iframe can scroll itself into view against the parent's wishes 🙄 – gman Jul 8, 2018 at 11:36 for those just looking for the code --


    document.documentElement.scrollTop = document.getElementById("xB").offsetTop;

– DaveAlger Dec 19, 2018 at 15:18 Perfect example why the full solution should go on Stackoverflow instead of just linking to it. Unfortunately, the above site does not exist anymore. – alpipego Nov 23, 2021 at 19:02

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.
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;
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.