Friday, April 15, 2011

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

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 ?

From stackoverflow
  • In 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);
    }
    
    Code Burn : 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.
  • 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.

    Code Burn : The iframe content comes from the same domain.
  • The iframe content comes from the same domain.

    No success until now..

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

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

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

0 comments:

Post a Comment

Note: Only a member of this blog may post a comment.