How can I detect a Scrollbar presence ( using Javascript ) in HTML iFrame?
Solution 1
Using jQuery you can compare the document height, the scrollTop position and the viewport height, which might get you the answer you require.
Something along the lines of:
$(window).scroll(function(){
if(isMyStuffScrolling()){
//There is a scroll bar here!
}
});
function isMyStuffScrolling() {
var docHeight = $(document).height();
var scroll = $(window).height() + $(window).scrollTop();
return (docHeight == scroll);
}
Solution 2
var root= document.compatMode=='BackCompat'? document.body : document.documentElement;
var isVerticalScrollbar= root.scrollHeight>root.clientHeight;
var isHorizontalScrollbar= root.scrollWidth>root.clientWidth;
This detects whether there is a need for a scrollbar. For the default of iframes this is the same as whether there is a scrollbar, but if scrollbars are forced on or off (using the ‘scrolling="yes"/"no"’ attribute in the parent document, or CSS ‘overflow: scroll/hidden’ in the iframe document) then this may differ.
Solution 3
$(window).scroll(function(){
if(isMyStuffScrolling()){
//scrolling
}else{
//not scrolling
}
});
function isMyStuffScrolling() {
var docHeight = $(document).height();
var scroll = $(window).height() ;//+ $(window).scrollTop();
if(docHeight > scroll) return true;
else return false;
}
improved-changed a bit from Jon`s Winstanley code
Solution 4
I do not think this can be done if the iframe content comes from another domain due to JavaScript security limitations.
EDIT: In that case, something along the lines of giving the iframe a name='someframe' and id='someframe2' and then comparing frames['someframe'].document.body.offsetWidth with document.getElementById('someframe2').offsetWidth should give you the answer.
Solution 5
I've found this works on any element, at least on Chrome:
hasVerticalScrollbar = (element.scrollHeight > element.offsetHeight)
||
(element.scrollHeight > element.clientHeight
Horizontal scrollbars can be detected the same, using Width
instead of Height
.
Bonfocchi
Updated on January 05, 2020Comments
-
Bonfocchi over 4 years
How can I detect a Scrollbar presence ( using Javascript ) in HTML iFrame ?
I have already tried :
var vHeight = 0; if (document.all) { if (document.documentElement) { vHeight = document.documentElement.clientHeight; } else { vHeight = document.body.clientHeight } } else { vHeight = window.innerHeight; } if (document.body.offsetHeight > vHeight) { //when theres a scrollbar }else{ //when theres not a scrollbar }
And I also had tried :
this.scrollLeft=1; if (this.scrollLeft>0) { //when theres a scrollbar this.scrollLeft=0; }else{ //when theres not a scrollbar return false; }
With no success..
I have searched the javascript objets on DOM Inspector, but didn't find anything.
Is is possible to detect a scrollbar presence in a iframe in javacscript ?
The iframe content comes from the same domain.
No success until now..
-
Bonfocchi about 15 yearsThank you for your answer, but your code only tests when I try to move the scrollbar. I want a to test it on page load.
-
kaboom over 9 yearsI'm sorry, but this is not a correct solution. :( Your code actually checks, whether document is scrolled to the bottom. Here is a proof: jsfiddle.net/vvdb0292/2. I think bobince's answer is correct.
-
Julian over 9 yearsThis should be the answer
-
bab over 7 yearsWhy do you test for 'BackCompat' instead of just using the
documentElement
in all compat modes? -
Amit Patil over 7 years@bab when you're in Quirks Mode (IE5 compat) the top-level document scrollbar is on the body element instead of html.
-
Robbendebiene almost 4 yearsFor further simplicity you could replace the
compatMode
check withvar root = document.scrollingElement;