在父级到达底部之前，不允许 iframe 滚动答案

【问题标题】：don't allow iframe to scroll until parent has reached the bottom在父级到达底部之前，不允许 iframe 滚动
【发布时间】：2013-11-21 08:51:07
【问题描述】：

我有一个包含 iframe 的页面，iframe 有足够的内容，它总是必须有一个滚动条。

如何只允许 iframe 在父页面位于底部时开始滚动？

【问题讨论】：

你能做个小提琴吗
确定 - jsfiddle.net/yA8mR
参考这个jsfiddle.net/UD_B/yA8mR/1你能知道你真正想在页面中添加什么行为
行为在标题中。假设您将鼠标悬停在 iframe 上并滚动到主页底部，他不希望 iframe 在您到达底部之前开始滚动。

标签： javascript jquery html

【解决方案1】：

<html>
<head>
<script type="text/javascript" src="jq.js"></script>
<script type="text/javascript">

$(document).ready(function()
{
 var scrollHeight;

 $('body').animate({scrollTop: 1200},10,function()
 {
    scrollHeight=$(window).scrollTop();
    $('body').scrollTop(0)
 })

$('iframe').contents().find('body').css({

'overflow-y':'hidden'
})

$('iframe').contents().find('body').append($('body').clone())

$('iframe').contents().find('body iframe').css('background','lightblue')

$('iframe').contents().find('body').css('background','lightgreen').find('h3').text("Cloned")

//note that horizontal bar inside iframe belongs to cloned body not iframe

$(window).scroll(function(){
    var st = $(this).scrollTop();

    if(st >=scrollHeight){

      $('iframe').contents().find('body').css({

  'overflow-y':'auto'
  })    
    }
});
})

</script>

</head>
<body>
<h3>Page content goes here</h3>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

<iframe  style=" border: 2px red solid" height="300px" width="100%" scrolling="yes"></iframe>
<p>&nbsp;</p>
</body>
</html>

工作于 chrome 31.0.1650.57 m，opera 16.0.1196.73，safari 5.1.7

未使用
火狐 25.0.1 reason can be

IE9as expected lol :)

问题提及评论后编辑

我没有对此进行测试，但希望它会起作用

<iframe name="frame" src="xyz.php" style=" border: 2px red solid" height="300px" width="100%" scrolling="yes"></iframe>

$(window).load(function()
{
  var scrollHeight;
  $('body').animate({scrollTop: 1200},10,function()
  {
   scrollHeight=$(window).scrollTop();
   $('body').scrollTop(0)
  })

 var doc=window.frames[ "frame" ].document  //use iframe's name

 $(doc).ready(function(){
  $('iframe').contents().find('body').css('overflow','hidden')

 });



 $(window).scroll(function(){
 var st = $(this).scrollTop();

 if(st >=scrollHeight){

  $('iframe').contents().find('body').css('overflow','auto')
  }
});
})

【讨论】：

小提琴有效，但在我的页面上，当我滚动到底部时，iframe 滚动条没有显示
@charlie 我已经编辑了答案，我希望这会奏效。此外，如果 iframe 从另一个域加载页面，它将无法工作，因为在这种情况下，由于浏览器中使用的安全措施，您无法访问 iframe 的内容
工作正常，但它改变了我的 iframe 的 src
它从这一行改变 $('iframe').contents().find('body').append($('body').clone()) 我希望它保持我在 HTML 中有 SRC
答案中的@charlie代码仅用于演示目的，您可以删除above the comment这三行。另请考虑我对外部域的最后评论

【解决方案2】：

你只需要改变 iframe 的滚动属性：

$('iframe').attr('scrolling','no');

然后使用scroll()函数检测底部滚动。

$(window).scroll(function(){
    var st = $(this).scrollTop();
    if(st + $(window).height() == $(document).height()){
        $('iframe').attr('scrolling','yes');    
    }
});

感谢@putvande 指出这一点，MDN 说 HTML4 only (MDN <iframe>) 但我仍然可以看到它在我的 chrome 浏览器上正常工作。此外，所有现代浏览器还没有完全支持 overflow:hidden for <iframe>。

我认为最安全的方法是同时设置 CSS 'overflow' 和 scrolling="" 属性。

$('iframe').attr('scrolling','no').css({'overflow':'hidden'});

$(window).scroll(function(){
    var st = $(this).scrollTop();
    if(st + $(window).height() == $(document).height()){
       $('iframe').attr('scrolling','yes').css({'overflow':'auto'});   
    }
});

【讨论】：

请注意，scrolling 仅适用于 HTML4（因此不适用于 HMTL5）。你可以设置overflow: hidden, overflow: auto;