2

I know that detecting scrollbar presence is supposed to be one of those elusive things that we should all have to suffer through. What I've read so far is that you can't really detect scrollbar presence, only use hints in the DOM to know if they may be present, and it can't be done in less than 30 lines of code.

This sounds a little impossible to me now that we're in 2010. Does jQuery have a cross-browser reliable solution that takes care of this and works at least most of the time? Any help please, I'm pulling my hair, half of it is already on the floor.

nobody
  • 19,814
  • 17
  • 56
  • 77
donpal
  • 2,112
  • 4
  • 17
  • 20
  • This may be naive approach, but what's wrong with `var scrollbar_present = $(document).height > $(window).height()`? – jholster Apr 03 '10 at 14:47
  • I haven't dug into the jQuery implementation to know what vanilla javascript code this single line implements. Is it possible that this is all I need? If this is the standard way it's done in jQuery, then I will use it for sure. Anyone has objections to this solution? – donpal Apr 03 '10 at 14:54
  • @Yaggo, Ok, I just tested `$(document).height > $(window).height()` and it gives me false regardless of whether I'm seeing scrollbars or not. So I'm guessing maybe it doesn't work. – donpal Apr 03 '10 at 15:02
  • 1
    Sorry, there was a typo, corrected version: `var scrollbar_present = $(document).height() > $(window).height()`. Works for me on Safari. – jholster Apr 03 '10 at 17:07
  • http://stackoverflow.com/questions/2647761/detecting-presence-of-a-scroll-bar-in-a-div-using-jquery/8971716#8971716 – PlugTrade Jun 23 '14 at 13:03

1 Answers1

3

Probably not as elegant as you were hoping for but this is an adequate adaption from a script I recently wrote to calculate viewport height.

Logically you'd want to call this function on document ready and window resize.

It also deals with inconsistencies that you'd encounter in Opera (line 2) and IE7 (line 6).

function scrollbar() {
    var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height();

    if (jQuery.browser.msie) {
        if(parseInt(jQuery.browser.version) == 7) {
            viewportHeight -= 3;
        }
    }

    if(viewportHeight <= $('#wrapper').height()) {
        return true;
    } else {
        return false;
    }
}
Steve
  • 5,771
  • 4
  • 34
  • 49
  • +1 Nice, but it doesn't take into consideration `overflow: hidden`, which could prevent a scrollbar from appearing. – Pekka Apr 03 '10 at 15:03
  • I think it would work as long as `#wrapper` wasn't the element with `overflow: hidden`- say it was wrapped in `#outer-wrapper` and that had `overflow: hidden`; wouldn't `#wrapper`'s height remain the same? – Steve Apr 03 '10 at 15:16
  • You could also refactor the last few lines to a 1-liner tertiary like this `return (viewportHeight <= $('#wrapper').height()) ? true : false;` I've tested it though and I still get a false, not sure what's wrong. I think I may be having a javascript/jquery conflict somewhere or I'm calling these functions incorrectly. – donpal Apr 03 '10 at 15:18
  • I'd imagine you can even knock the `? true : false` off the end somehow, I couldn't be bothered to check my syntax though. Are you sure your `#wrapper` is taking the full height of it's content? Perhaps you could try a clearfix at the end? – Steve Apr 03 '10 at 15:29
  • 1
    You can write just `return viewportHeight <= $('#wrapper').height()`, which always returns true or false, because `< > == <= => !=` are boolean operators. – jholster Apr 03 '10 at 17:10
  • Yup, you mean `>=` though not `=>` :) – Steve Apr 03 '10 at 17:31