Question

我有一个可滚动的iframe。调用一个函数，该函数传递一个div（文本消息气泡）的ID来聚焦。它可以工作但是当关注项目时它总是出现在iframe的最顶端。因此，用户必须向上滚动一点才能看到用户正在回复的消息。我希望该功能能够专注于消息，但让它出现在iframe的正中心。我相信问题在于我试图使用......

iframe.contentWindow.location.hash

与......结合使用。

iframe.contentWindow.scrollTo(0,400);

我无法想到解决方案。我想是可以得到有问题的项目的y-coord和scrollTo它的y-coord + iframe的高度的一半。但是还没有好运。这是一个可以玩的jsfiddle：http://jsfiddle.net/df09shon/3/

Answer 1

这是一个使用Firefox的解决方案（我无法在Internet Explorer上测试）： http://jsfiddle.net/df09shon/4/

我只是将 scrollTo（）放在 window.setTimeout（）中。在这种情况下，我肯定会在 location.hash 之后进行滚动。

window.setTimeout(
    function() {
        iframe.contentWindow.scrollTo(
            0, iframe.contentWindow.scrollY - iframe.clientHeight / 2);
    }
);

Answer 2

尝试

    function goToMsg(id){
      var elem = iframe.contentWindow.document.getElementById(id);
      iframe.contentWindow.location.hash = id;
      $("html, body")
      .animate({scrollTop:$( elem ).offset().top}, 250, function() {        
        $(elem).fadeIn(200).fadeOut(200).fadeIn(200)
        .fadeOut(200).fadeIn(200).fadeOut(200).fadeIn(200)
        .fadeOut(200).fadeIn(200);
      })
    //iframe.contentWindow.scrollTo(100,100);
    }

jsfiddle http://jsfiddle.net/df09shon/6/

Answer 3

我明白了。基本上我不得不取消iframe.contentWindow.location.hash而只是抓住气泡的y-coord然后滚动到该位置减去iframe高度的一半。这是... http://jsfiddle.net/df09shon/8/

关键部分是......

var rect = elem.getBoundingClientRect();
//console.log(rect.top, rect.right, rect.bottom, rect.left);
iframe.contentWindow.scrollTo(0,rect.top-iframe.clientHeight / 2);

JavaScript：滚动iframe，直到有焦点的div出现在iframe的中心

3 个答案: