23

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

Yuriy Galanter
  • 38,833
  • 15
  • 69
  • 136

4 Answers4

20

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.

Yuriy Galanter
  • 38,833
  • 15
  • 69
  • 136
  • 1
    Nice blog post on subject also, Yuriy. – Cameron Feb 27 '16 at 20:34
  • @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 '16 at 16:21
  • 4
    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 08 '18 at 11:36
  • 1
    for those just looking for the code -- `document.documentElement.scrollTop = document.getElementById("xB").offsetTop;` – DaveAlger Dec 19 '18 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 '21 at 19:02
  • @alpipego unfortunately I had to kill the blog, but the post is still available via Wayback Machine: https://web.archive.org/web/20140126145113/http://codecorner.galanter.net/2014/01/06/how-to-make-scrollintoview-apply-to-iframe-only/ I will update the reply. – Yuriy Galanter Nov 23 '21 at 23:05
4

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.

Bucky
  • 65
  • 8
1

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;
user19060506
  • 11
  • 1
-2

How about this:

window.parent.scrollTo(0,0);
Zoe
  • 27,060
  • 21
  • 118
  • 148
Nate Hammond
  • 56
  • 5