Scrolling an Iframe with JavaScript

scroll an iframe from parent page

This works:

document.getElementById("go").contentWindow.setTimeout("this.scrollTo(0, 200);",1);

Update. Doh. Works in IE only, but I think there's something there.

Update 2 This works universally:

document.getElementById("go").onload = function () { this.contentWindow.scrollTo(0, 200) };

You have to wait for iframe content to finish loading for scrollTo to work.

How to properly scroll IFrame to bottom in javascript

Scrolling to bottom is always like scrolling to some ridiculously large top offset, e.g. 999999.

iframe.contentWindow.scrollTo( 0, 999999 );

In addition see this post: Scrolling an iframe with javascript?

If scrolling occurs too early it's probably due to images not being loaded yet. Thus, you will have to scroll as soon as added image has been loaded rather than on having placed it. Add

newImg.onload = function() { triggerScrolling(); };

after creating newImg, but before assigning property src.

If several events are required to trigger scrolling you might need to use some "event collector".

function getEventCollector( start, trigger ) {
    return function() {
        if ( --start == 0 ) { trigger(); )
    };
}

You can then use it like this:

var collector = getEventCollector( 2, function() { triggerScrolling(); } );
newImg.onload = collector;
window.setTimeout( collector, 100 );

This way triggerScrolling() is invoked after 100ms at least and after image has been loaded for collector has to be invoked twice for triggerScrolling() being invoked eventually.

Force Inner-iframe Content to Scroll To Top On Pageload

Try using one of below onload scripts inside your iframe_B html tag:

<iframe id="iframe_B" name="iframe_B" src="Page4.html" scrolling="no" onload="window.top.scrollTo(0,0);">

Out of below, mostly the first 2 should work in your case.

onload="window.top.scrollTo(0,0);" //Refers to the top main window (page)
onload="window.parent.scrollTo(0,0);" //Refers to the immediate parent window (page)
onload="window.parent.parent.scrollTo(0,0);" //Refers to the parent of parent window (page)

I just tried it and both the first 2 onload event are working like a charm.

How to Scroll an iFrame using javascript

Try use the following (untested, but should work):

function scrollIFrame(name, x, y)
{
    var frame = document.getElementById(name);        
    frame.contentWindow.scrollTo(x, y);         
}

So, you would use:

scrollIFrame('iframe', 0, 250);

Problem triggering a scroll event in an iFrame in Javascript

This seems to work for me:

document
  .querySelector('#documentIFrame')
  .addEventListener('load', e => {
    e.target.contentWindow.addEventListener('scroll', e => {
      console.log('scrollin');
    });
  });

How do I forbid an iFrame from scrolling its parent window?

One such API that would allow even cross-origin iframes to scroll the top document is Element#scrollIntoView(). I didn't check it's really what your embedded page was doing, but that sounds like a very plausible explanation.

Here is a minimal example. To reproduce:

• Run the snippet
• Immediately scroll to the top of the page manually.
• Wait about 2s for the snippet scrolls back to view automagically:

(You can also click in the result iframe to call scrollIntoView again, 2s later).

onclick = e => setTimeout(() => {
  document.body.scrollIntoView();
}, 2000);
onclick();

Scroll to the top of the top page and wait 2s.

---

Related Topics