2

单击 iframe 中的任意位置时，我希望我的父页面滚动到该 iframe 底部下方的位置。但无论我在这里为偏移量设置了多大的数字，父级只会滚动直到 iframe 的底部与视口的底部对齐 - 不再进一步。我怎样才能让它滚动超出这个范围？

$('#iframe1').click(function () {
    $('html,body', window.parent.document).animate({
        scrollTop: '+=' + 700 + 'px'
    }, 'fast');
});
4

2 回答 2

2

根据我的测试，在我测试过的所有四种浏览器（Firefox、IE、Chrome 和 Safari）中都可以找到以下作品：

主页：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Main Page</title>
</head>
<body>
  <iframe src="iframe.html" style="width:400px; height:500px;"></iframe>
    <div style="width: 200px;">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam,
      pharetra at aliquam sed, luctus vel augue. Donec nec hendrerit velit. Sed
      fermentum volutpat libero a viverra. Mauris gravida cursus pulvinar. Morbi lorem
      nunc, pretium ut sollicitudin vel, facilisis ac ligula. Vestibulum imperdiet
      luctus augue, id euismod diam posuere ut. Suspendisse commodo ante nec dui
      suscipit ullamcorper porta justo consequat. Sed et eleifend erat. Duis ornare,
      nisi id hendrerit commodo, mauris metus dapibus arcu, ac tempor arcu justo sed
      arcu. Sed elementum ornare dolor, ac malesuada est vulputate non. Etiam nisl
      sapien, vestibulum ut blandit sed, suscipit vel erat. Sed elementum orci vitae
      magna vulputate consequat at ac lorem. Aenean libero risus, ornare sed posuere
      vitae, molestie vitae elit.
    </p>
    <p>
      Nullam nec lorem id turpis iaculis pretium. Pellentesque quam libero, pulvinar
      vitae viverra at, tincidunt vel dui. Mauris libero nibh, posuere eget aliquet
      eget, fermentum nec mi. Cras at venenatis ipsum. Fusce sed fermentum ante. Nam
      varius quam in lectus dignissim consequat. Cras semper, ligula eu ullamcorper
      pulvinar, orci quam vulputate lorem, vel dignissim lectus ipsum a justo. Etiam
      nibh nisi, tristique sit amet adipiscing in, volutpat non dolor. Etiam eros mi,
      consectetur sed adipiscing ut, egestas vel mauris. Pellentesque habitant morbi
      tristique senectus et netus et malesuada fames ac turpis egestas. Donec lacus
      leo, feugiat ac lacinia ac, aliquam quis ante. In eleifend gravida lectus, vitae
      rhoncus erat sagittis quis. In in nibh at risus faucibus dignissim. 
    </p>
  </div>
</body>
</html>

iframe 内容：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>iframe Page</title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <script type="text/javascript">
    /// wait till document ready
    $(function(){
      /// target the entire iframe page for a click
      $('body').click(function () {
          /// step back to the parent window and tell it to animate scroll
          $('html,body', window.parent.document).animate({
              scrollTop: '+=700px'
          }, 'fast');
      });
    })
  </script>
</head>
<body>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam,
    pharetra at aliquam sed, luctus vel augue. Donec nec hendrerit velit. Sed
    fermentum volutpat libero a viverra. Mauris gravida cursus pulvinar. Morbi lorem
    nunc, pretium ut sollicitudin vel, facilisis ac ligula. Vestibulum imperdiet
    luctus augue, id euismod diam posuere ut. Suspendisse commodo ante nec dui
    suscipit ullamcorper porta justo consequat. Sed et eleifend erat. Duis ornare,
    nisi id hendrerit commodo, mauris metus dapibus arcu, ac tempor arcu justo sed
    arcu. Sed elementum ornare dolor, ac malesuada est vulputate non. Etiam nisl
    sapien, vestibulum ut blandit sed, suscipit vel erat. Sed elementum orci vitae
    magna vulputate consequat at ac lorem. Aenean libero risus, ornare sed posuere
    vitae, molestie vitae elit.
  </p>
</body>
</html>

有了上述内容，我没有遇到任何问题，所以我只能假设您的页面设置中存在导致问题的原因。我不确定您的代码是如何通过直接在 iframe 本身上放置一个“点击”处理程序来工作的（这在我的任何测试中都不起作用）所以它可能是您在其他地方有另一个点击功能正在被触发并且是没有像您期望的那样滚动页面？或者它可能是浮动或位置问题（关于你的 iframe），但如果你说你可以手动滚动到正确的位置，那么我怀疑这会是一个原因。

于 2012-09-13T22:49:43.003 回答
0

我发现的最简单的解决方案是修改您的 iframe html 以包含 onload="window.parent.parent.scrollTo(0,0)" ，如下例所示：

<iframe src="https://myiframe.com" width="100%" height="1500px" onload="window.parent.parent.scrollTo(0,0)" />
于 2014-06-12T23:14:09.573 回答