У меня есть страница с iframe в ней, iframe имеет достаточно контента, чтобы всегда иметь полосу прокрутки.не позволяют iframe прокручиваться до тех пор, пока родитель не достигнет нижнего
Как я могу разрешить iframe запускать прокрутку, когда родительская страница находится внизу?
<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> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<iframe style=" border: 2px red solid" height="300px" width="100%" scrolling="yes"></iframe>
<p> </p>
</body>
</html>
работал в хром 31.0.1650.57 м, опера, сафари 16.0.1196.73 5.1.7
не работал в
Firefox 25.0.1 reason can be
IE9 as expected lol :)
EDIT ПОСЛЕ ВЫПУСКА УПОМИНАВШИХСЯ КОММЕНТАРИИ
я не проверял это, но надеюсь, что он будет работать
<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
@charlie, я отредактировал ответ, я надеюсь, что это сработает. Кроме того, если iframe загружает страницу из другого домена, это не сработает, потому что вы не можете получить доступ к содержимому iframe в этом случае из-за мер безопасности, используемых в браузерах – UDB
, которые отлично работают, но при изменении src моего iframe – charlie
Вам просто нужно изменить атрибут прокрутки 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 для еще не полностью поддерживается всеми современными браузерами.
Я думаю, что самый безопасный способ - установить атрибуты 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'});
}
});
Обратите внимание, что 'прокрутка' только для HTML4 (так что не будет работать в HMTL5). Вы можете просто установить 'overflow: hidden',' overflow: auto'; – putvande
вы можете создать скрипку – UDB
уверены - http://jsfiddle.net/yA8mR/ – charlie
со ссылкой на этот http://jsfiddle.net/UD_B/yA8mR/1/ один вы можете сказать, что поведение, которое вы на самом деле хотите добавить на страницу – UDB