У меня есть прокручиваемый div, который может содержать или не содержать один или несколько фреймов, содержимое которых следует загружать только тогда, когда iframe частично/полностью виден между верхом и низом области прокрутки родительского div. Однако, когда в div есть iframe и когда я проверяю свою веб-страницу в Chrome, я вижу, что значения offsetTop iframe не меняются, поскольку полоса прокрутки родительского div прокручивается вверх или вниз. Кроме того, я вижу, что offsetParent фреймов ссылается на элемент body, а не на прокручиваемый div, который фактически содержит фреймы.
Вот простая веб-страница, которая показывает базовую структуру div и вложенных iframe, о которых я говорю:
<!DOCTYPE html>
<html>
<body>
<!-- Scrolling div -->
<div id="scroller" style="height:316px; width: 322px; overflow-y:scroll;">
<!-- 5 iframes that each contain an img tag that is ignored -->
<iframe><img id="img" src="1.png"></iframe><br />
<iframe><img id="img" src="2.png"></iframe><br />
<iframe><img id="img" src="3.png"></iframe><br />
<iframe><img id="img" src="4.png"></iframe><br />
<iframe><img id="img" src="5.png"></iframe><br />
</div>
<script>
//
// Assign an onScroll function to the scroller div that monitors the div's
// scrolling ...
//
function scrollerDivScrolling() {
var div = scrollerDivScrolling.div;
//
// The following code only changes the div's background color when the
// div's scroll-bar is scrolled: white when less-than or 50px or
// yellow when more 50px.
//
if( div.scrollTop > 50 ) {
div.style.backgroundColor = "yellow";
}
else {
div.style.backgroundColor = "white";
}
//
// This is code needs to check each of the iframe's position to
// see if the iframe is displayed partially/fully between the
// parent div's scroll area's top and bottom, and if so then the
// iframe's content is set to the html statement(s) that are
// between to iframe's opening and closing tags. If the iframe's
// position is either completely above top of the parent div's
// scroll area or completely below the parent div's scroll area,
// then remove the contents.
//
}
scrollerDivScrolling.div = document.getElementById( 'scroller' );
scrollerDivScrolling.iframes = scrollerDivScrolling.div.getElementsByTagName( 'iframe' );
scrollerDivScrolling.div.onscroll = scrollerDivScrolling;
// Initialize the iframes with in the scroller div to 'show' their contents ...
for( var i = 0, iframes = scrollerDivScrolling.iframes, l = iframes.length, iframeDoc = null; i < l; ++i ) {
iframeDoc = iframes[ i ].contentWindow.document;
iframeDoc.open();
iframeDoc.write('Test' + ( i + 1 ) );
iframeDoc.close();
}
</script>
</body>
</html>
Как показано в приведенном выше коде, iframes фактически загружаются с помощью «Test», за которым следует число, а не оператор тега изображения, который находится в отдельных тегах iframe, но это не проблема, поскольку я знаю, как это сделать уже. Что еще более важно, функция scrollerDivScrolling(), которая обрабатывает прокрутку div, на самом деле не изменяет содержимое каждого iframe в зависимости от его положения относительно верхней и нижней части области прокрутки родительского div, потому что я не выяснил, какие свойства каждого iframe мне нужно использовать.
