iframe on the page bottom: avoid automatic scroll

Question

I have an iframe from the middle to bottom on a page. When I load the page it scrolls to the bottom. I tried to body onload window.scroll(0,0) but it does an ugly effect because it first goes down and then immediately scrolls up.

What's the cause of this automatic scroll to bottom with iframe on the page?

Answer 1

The src="about:blank" trick provided by Leandro & edited by Spokey worked for me, but I'd like to share a workaround I was using before.

A temporary solution I found was to embed the iframe in the uppermost element on my page (nav, header etc), so that even if the browser wants to jump to focus, it 'jumps' to the top element. This still can cause a slightly perceptible jump, which might bug you.

To make sure the iframe remains hidden if you choose to place it near the top of a page, I applied an inline style of style="visibility:hidden; height: 0px; width: 0px;". I guess you could also use a z-index combo.

Answer 2

This seems to work well:

<iframe src="http://iframe-source.com" onLoad="self.scrollTo(0,0)"></iframe>

Answer 3

Simple. Use about:blank in src like

<iframe id="idName" name="idName" src="about:blank" style="display:none"></iframe>

Answer 4

I came up with a "hack" that works well. Use this if you don't want your webpage to be scrolled to anywhere except the top:

// prevent scrollTo() from jumping to iframes
var originalScrollTo = window.scrollTo;

window.scrollTo = function scrollTo (x, y) {
  if (y === 0) {
    originalScrollTo.call(this, x, y);
  }
}

If you want to disable autoscrolling completely, just redefine the function to a no-op:

window.scrollTo = function () {};

Answer 5

This is just a random one, but possible doing something like this:

<iframe style="display: none;" onload="this.style.display='block';" href="..."></iframe>

The thinking being that if it is some focus stealing script on a remote page that you can't control, the browser won't focus a hidden element. And there's a good likelihood that your onload will fire after their focus changing script.

Or, one other option that might be a bit more reliable:

<iframe style="position: absolute; top: -9999em; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';" href="..."></iframe>

Here we're basically saying hiding the frame and moving it to a negative offset on the page vertically. When it does try to focus the element inside of the frame, it should scroll the page upward, then once loaded place the iframe back in it's intended position.

Of course, without knowing more, it's hard to say for sure which tradeoffs are okay, and both of these options have conditions that are a tad racy, so YMMV.

I hope that helps :)

Answer 6

This is the solution I came up with and tested in Chrome.

We have an iframe wrapped by a div element. To keep it short, I have removed the class names related to sizing the iframe. Here, the point is onMyFrameLoad function will be called when iframe is loaded completely.

<div class="...">
    <iframe onload="onMyFrameLoad()" class="..." src="..."></iframe>
</div>

Then in your js file, you need this;

function noscroll() {
  window.scrollTo(0, 0);
}
// add listener to disable scroll
window.addEventListener('scroll', noscroll);
function onMyFrameLoad() {
  setTimeout(function () {
    // Remove the scroll disabling listener (to enable scrolling again)
    window.removeEventListener('scroll', noscroll);
  }, 1000);
}

This way, all the scroll events become ineffective till iframe is loaded. After iframe is loaded, we wait 1 sec to make sure all the scroll events (from iframe) are nullified/consumed. This is not an ideal way to solve your problem if your iframe source is slow. Then you have to wait longer by increasing the waiting time in setTimeout function.

I got the initial concept from https://davidwells.io/snippets/disable-scrolling-with-javascript/