Javascript don'；在父级到达底部之前，不允许iframe滚动_Javascript_Jquery_Html

Javascript don'；在父级到达底部之前，不允许iframe滚动

javascript jquery html

Javascript don'；在父级到达底部之前，不允许iframe滚动,javascript,jquery,html,Javascript,Jquery,Html,我有一个带有iframe的页面，iframe有足够的内容，它总是有一个滚动条如何仅在父页面位于底部时才允许iframe开始滚动？您只需更改iframe滚动属性： $('iframe').attr('scrolling','no'); 然后使用scroll（）功能检测底部滚动 $(window).scroll(function(){ var st = $(this).scrollTop(); if(st + $(window).height() == $(document).h

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

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

您只需更改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，但我仍然可以看到它在我的chrome浏览器上正常工作。另外，

的

溢出：隐藏的，
还没有得到所有现代浏览器的完全支持
我认为最安全的方法是同时设置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'});   
    }
});


你能创建一个fiddlesure吗？提到这个，你能告诉我你到底想在页面中添加什么行为吗？这个行为在标题中。假设您将鼠标悬停在iframe上并滚动到主页的底部，他不希望iframe在您到达底部之前开始滚动。请注意，scrolling
仅适用于HTML4（因此在HMTL5中不起作用）。您可以只设置溢出：隐藏
，溢出：自动
；小提琴工作，但在我的页面上，当我滚动到底部时，iframe滚动条不工作showing@charlie我已经编辑了答案，我希望这能奏效。另外，如果iframe正在从另一个域加载页面，则它将不起作用，因为在这种情况下，由于浏览器中使用的安全措施，您无法访问iframe的内容。该措施可以正常工作，但它会更改我的iframe的src。它会从此行更改$（'iframe'）.contents（）.find（'body'）.append（$（'body'）.clone（））我想让它保持我的SRC在HTML@charlie答案中的代码仅用于演示，您可以删除注释上方的三行。也请考虑我对外部领域的最后评论
<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>

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