How can I detect a Scrollbar presence ( using Javascript ) in HTML iFrame?

Question

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..

alt text http://www.upvtp.com.br/file.php/1/help_key.jpg

score 48 · Answer 1 · answered Mar 25 '09 at 14:03

48

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.

answered Mar 25 '09 at 14:03

bobince

528,062
107
651
834

Why do you test for 'BackCompat' instead of just using the `documentElement` in all compat modes? – bab Oct 23 '16 at 04:42
1

@bab when you're in Quirks Mode (IE5 compat) the top-level document scrollbar is on the body element instead of html. – bobince Oct 23 '16 at 09:35
For further simplicity you could replace the `compatMode` check with `var root = document.scrollingElement;` – Robbendebiene Jul 23 '20 at 15:41

Jon Winstanley · Accepted Answer · 2013-01-11T10:31:46.920

9

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

edited Jan 11 '13 at 10:31

answered Mar 25 '09 at 11:04

Jon Winstanley

23,010
22
73
116

1

Thank 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. – Bonfocchi Mar 25 '09 at 11:30
3

I'm sorry, but this is not a correct solution. :( Your code actually checks, whether document is scrolled to the bottom. Here is a proof: http://jsfiddle.net/vvdb0292/2/. I think bobince's answer is correct. – kaboom Oct 01 '14 at 10:39

score 3 · Answer 3 · answered Aug 19 '10 at 00:33

$(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

score 1 · Answer 4 · answered Jan 04 '18 at 10:27

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.

mike nvck · Answer 5 · 2009-03-26T07:54:22.190

1

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.

edited Mar 26 '09 at 07:54

answered Mar 25 '09 at 11:24

mike nvck

454
2
9

1

The iframe content comes from the same domain. – Bonfocchi Mar 25 '09 at 11:33

score 0 · Answer 6 · answered Mar 26 '09 at 07:12

0

I think your second attempt is on the right track. Except instead of this, you should try scrolling/checking document.body.

answered Mar 26 '09 at 07:12

levik

114,835
27
73
90

How can I detect a Scrollbar presence ( using Javascript ) in HTML iFrame?

6 Answers6

Linked