title: How do I detect if there are scrollbars on a browser window?
body: <p>I need to be able to detect whether there are scrollbars (both vertical and horizontal) on a browser window.  I've been using this code but it isn't working reliably in Firefox 5.</p>
  
  <pre><code>JFL.GetScrollbarState = function () {
      var myWidth = 0;
      var myHeight = 0;
      if (document.documentElement &amp;&amp; document.documentElement.clientWidth) {
          myWidth = document.documentElement.clientWidth;
          myHeight = document.documentElement.clientHeight;
      } else {
          myWidth = document.body.clientWidth;
          myHeight = document.body.clientHeight;
      }
      return ({
          vScrollbar: document.body.scrollHeight &gt; myHeight,
          hScrollbar: document.body.scrollWidth &gt; myWidth
      });
  }
  </code></pre>
  
  <p>Is there a better way to do this that will work cross browser.  My browser targets are  Firefox 4-5, Chrome, Safari 4+, Opera 10+.</p>
  
  <p>If you're interested in why I need to know if there are scrollbars, it's because I have some spinning CSS3 transitions that (due to the nature of their spinning) may temporarily go beyond the edges of the current document size (thus making the document temporarily larger).  If were no scrollbars initially present, the CSS3 transition may cause scrollbars to show up during the transition and then go away when the transition is finished, leading to an ugly scrollbar flash.  If I know that there are no scrollbars present, I can temporarily add a class that will set overflow-x or overflow-y to hidden and thus prevent the scrollbar flash during the CSS3 transition.  If scrollbars are already present, I don't have to do anything because they may move a little, but they won't go on/off during the transition.</p>
  
  <p>Bonus points if one can actually tell not only if scrollbars would generally be required, but whether they are actually there or not.</p>