How to properly scroll IFrame to bottom in javascript

Question

For a mockup-webpage used for research on interaction on websites, I created a mockup message-stream using JavaScript. This message stream is loaded in an IFrame and should show images at pre-set intervals and scroll to the bottom of the page after placing a new image at the bottom of the page. Getting the images to appear is working quite well with the provided script. However, both Chrome and IE seem to have trouble scrolling the page to the bottom. I would like to scroll to the bottom of the page as soon as the image is attached, but have for now added a 5 ms delay because that seemed to work sometimes. My questions are:

• Is it okay to use document.body.scrollHeight for this purpose?
• Can I make the scroll occur directly, or do I need a small interval before scrolling?
• How to make the code scroll to the bottom of the IFrame directly after adding an image?

The following functions are used and trypost() is started onLoad:

function scrollToBottom(){
  window.scrollBy(0,document.body.scrollHeight);
}

function trypost(){
  point = point + 1;
  if(point < interval.length){
    //create and append a new image
    var newImg = document.createElement("IMG");
    newImg.src = "images/"+images[point]+".png";
    document.getElementById('holder').appendChild(newImg);
    //create and append a return
    var br = document.createElement("br");
    document.getElementById('holder').appendChild(br);
    //time scroll to bottom (after an arbitrary 5 seconds)
    var stb = window.setTimeout(scrollToBottom, 5);
    //time next post
    var nextupdate = interval[point]*400;
    var tp = window.setTimeout(trypost, nextupdate);
  }
}

My script section contains at least the following variables:

var point = -1;
var interval = [10, 10, 15];
var images = ["r1", "a1", "r2"];

This questions is a continuation of the project described in How to proper use setTimeout with IE?

Answer 1

To answer one of your questions, document.body.scrollHeight is appropriate for this purpose, but not if you're actually calling for document. That'll give you the scroll height of the document the iFrame is in, not the iFrame's document. The iFrame's document can be called upon by [insert variable for iFrame here].contentDocument.

Here's how I did it (and by that, I mean I tested it out with my own stuff to make sure it worked):

let i = document.querySelector('iframe')
i.contentWindow.scrollTo(0, i.contentDocument.body.scrollHeight);

That being said, the other answer by Thomas Urban will also work most of the time. The difference is only if your page has a really long scroll height. Most pages won't be longer than 999999 (for all I know that's impossible and that's why they chose that number), but if you have a page longer than that, the method I showed here would scroll to the bottom and the 999999 would scroll to somewhere not yet at the bottom.

Also note, if you have more than one iFrame, you're gonna want to query it in a different way than I did, like by ID.

Answer 2

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.