25

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?

6
  • have you tried to disable scrolling on the iframe?
    – ascanio
    Jul 6, 2011 at 12:58
  • it scrolls the same way, also with scrolling="no" ...exactly it scrolls to the middle of the page, just where is the iframe position
    – smepie
    Jul 6, 2011 at 13:07
  • 1
    maybe it's a focus problem on the remote iframe... and maybe i can't do anything. If someone has a solution is appreciated (forcing focus on the parent page... something like that) Thanks
    – smepie
    Jul 6, 2011 at 14:34
  • Could you try firstly to render the frame without scrolling then (when onload) attach scrolling to it?
    – sergzach
    Jul 27, 2011 at 14:17
  • I'm sure this isn't a problem anymore, but you either need to do what Nate is suggesting, or if you have a blank iframe src (src="#") then create a blank html page and point the iframe' src at that page. Webkit browsers do this (en.wikipedia.org/wiki/WebKit).
    – slim
    Apr 26, 2012 at 15:17

8 Answers 8

34

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

<iframe style="display: none;" onload="this.style.display='block';" src="..."></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';" src="..."></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 :)

2
  • 1
    Tried doesn't work when the scrolling is caused by autofocus input element inside iframe.
    – abbr
    Oct 21, 2015 at 18:55
  • 2
    thanks! seems to still be relevant in 2019 in Chrome 73
    – mjj1409
    Mar 28, 2019 at 16:41
2

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 () {};
1
  • This is exactly what I needed. Thank you.
    – Gray Ayer
    Jun 17, 2021 at 0:18
1

This seems to work well:

<iframe src="http://iframe-source.com" onLoad="self.scrollTo(0,0)"></iframe>
1
  • 1
    It scrolls down to the iframe and then back to the top. Sep 26 at 17:10
0

Similar method but using classes.. I added a class to the iFrame's parent div of "iframe_display" with a style inside that of visibility: hidden. On page load I then used jQuery to remove the class

.iframe_display{visibility:hidden}

$(function(){
    $('#iframe_wrapper').removeClass('iframe_display');
});

This takes the focus away from the iFrame and stops the scrolling down to the iFrame on page load

0

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.

1
  • Im using this solution but achor links in the page wont work properly if you do that...
    – rousseauo
    Apr 13, 2015 at 14:56
0

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/

0

I've tried different solutions and nothing worked properly for me. In the end I achieved with the following script in my document's <head>:

<script>
  document.addEventListener('DOMContentLoaded', function(){
    
    var iframe = document.getElementById("YourIframeId");
    
    iframe.style.position="fixed";
    iframe.style.visibility="hidden";
    
    iframe.onload = function() {
      iframe.style.position="initial";
      iframe.style.visibility="initial";
    };
  });
</script>

Once the DOM has been parsed, I hide the iframe and I set it to position:fixed. That way it would show at the top of the page. No additional CSS required for this. I don't use display: none because although it prevents the scroll, then my iframe content doesn't load correctly in some browsers (Chrome) when I set it back to display:block;.

At the exact moment the iframe has loaded it triggers its scroll, even before you set the scroll position back to the top, so you see the page scrolling down and then back up, so it's not a good solution either. In my case I just set it back to its initial position and visibility.

So with this code when the scroll to the iframe is triggered the iframe is invisible at the top of the page, and right after that it goes back to its original position, so no unwanted scroll is experienced.

Notice that this may mean that when you have scrolled down and you refresh the page, you will go back to the top instead of getting the refresh at the current scroll position.

-1

Simple. Use about:blank in src like

<iframe id="idName" name="idName" src="about:blank" style="display:none"></iframe>
1
  • 11
    If you put about:blank in the src how do you get the iframe to load? Where do you put the actual iframe url?
    – user973671
    Aug 15, 2017 at 18:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.