如何在javascript中正确滚动IFrame到底部 [英] How to properly scroll IFrame to bottom in javascript

问题描述

对于用于研究网站上交互的模型网页，我使用JavaScript创建了一个模型消息流。此消息流将加载到IFrame中，并应以预设的时间间隔显示图像，并在页面底部放置新图像后滚动到页面底部。使用提供的脚本可以很好地显示图像。但是，Chrome和IE似乎都无法将页面滚动到底部。我想在图像附加后立即滚动到页面底部，但现在添加了5毫秒的延迟，因为它似乎有时会起作用。我的问题是：

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:

• 为此可以使用document.body.scrollHeight吗？


• 我可以直接进行滚动，还是在滚动之前需要一个小间隔？


• 如何在添加图像后直接将代码滚动到IFrame的底部？

使用以下函数并在onLoad上启动trypost（）：

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"];

此问题是如何正确使用带有IE的setTimeout？

推荐答案

滚动到底部总是像滚动到一些可笑的大顶部偏移，例如 999999 。

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

iframe.contentWindow.scrollTo( 0, 999999 );

此外，请看这篇文章：使用javascript滚动iframe？

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(); };

创建 newImg 后，但在分配属性之前 src 。

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

这样 triggerScrolling（）在调用之后被调用和至少和加载收集器后，必须调用两次，最终调用triggerScrolling（）。

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.

这篇关于如何在javascript中正确滚动IFrame到底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！