Question

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

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

Answer 1

您只需更改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 （MDN <iframe>），但我仍然可以在Chrome浏览器上看到它正常工作。所有现代浏览器尚未完全支持overflow:hidden的{{1}}。

我认为最安全的方法是设置CSS <iframe>和'overflow'属性。

scrolling=""

Answer 2

<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

无法使用
firefox 25.0.1 reason can be

IE9 as 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滚动，直到父级到达底部

2 个答案: