Menu
jQuery's scrollTop returns null when window is an iframe. Has anyone been able to figure out how to get scrollTop of an iframe?
more info:
my script is running in the iframe itself, the parent window is on another domain, so I can't access the ID of the iframe or anything like that
570
scrollTop()Returns: Number. Description: Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.
An element's scrollTop value is a measurement of the distance from the element's top to its topmost visible content. When an element's content does not generate a vertical scrollbar, then its scrollTop value is 0 .
I found this question while trying to SET scrollTop inside an iframe... not exactly your question (you wanted to GET) but here's a solution inside iframes for people that also end up here trying to SET.
If you want to scroll to the top of the page this will NOT work inside an iframe:
$("html,body").scrollTop(0);
However, this will work:
document.getElementById("wrapper").scrollIntoView();
Or the equivilent with jQuery:
$("#wrapper")[0].scrollIntoView();
For this markup (contained inside an iframe):
<html>
<body>
<div id="wrapper">
<!-- lots of content -->
</div>
</body>
</html>
$('#myIframe').contents().scrollTop()
You can set scrollTop by using this setup:
$("html,body").scrollTop(25);
So you could try getting it like this:
$("html,body").scrollTop();
Because different browsers set the scrollTop on different elements (body or html).
From the scrollTo plugin:
But that will probably still fail in certain browsers. Here is the relevant section from the source code of Ariel Flesher's scrollTo plugin for jQuery:
// Hack, hack, hack :)
// Returns the real elements to scroll (supports window/iframes, documents and regular nodes)
$.fn._scrollable = function(){
return this.map(function(){
var elem = this,
isWin = !elem.nodeName || $.inArray( elem.nodeName.toLowerCase(), ['iframe','#document','html','body'] ) != -1;
if( ! isWin ) {
return elem;
}
var doc = (elem.contentWindow || elem).document || elem.ownerDocument || elem;
return $.browser.safari || doc.compatMode == 'BackCompat' ?
doc.body :
doc.documentElement;
});
};
You may then run:
$(window)._scrollable().scrollTop();
To determine how far the iframe has scrolled down.
12
Good old javascript:
scrollTop = document.getElementById(IFRAME_ID).contentWindow.document.body.scrollTop;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
