5

On a web page, I need to test if there is a horizontal scrollbar or not (so that I programmatically change the css of some other element). Is there some way to get that information using jquery (or pure javascript)?

I tested

function isHorizontalScrollbarEnabled() {
    return $(document).width()!=$(window).width();
}

but it does not seem to work with all browsers (does not work for example with a recent Samsung phone I tested). I need it to work with all browsers, including recent mobile devices.

Thank you!

EDIT 1

I tested the solutions provided by plalx and laconbass, tested IE8, Firefox, Chrome and iPad. Works with IE, Firefox & Chrome but not as I want on the iPad.

The problem seems related to the zooming feature on mobile devices: even though, when I zoom in on the iPad, a horizontal scrollbar appears, document, window and document.body widths do not change (was also the same problem with the Samsung phone I tested earlier today).

Here is the code I used to test:

<!DOCTYPE html>
<html lang="en">
    <head>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
      <title>test</title>
    </head>

    <body>
      <div style="width: 500px; background: red;" id="test">click here to test</div>
      <script type="text/javascript">
        var i = 1;
        $("#test").click(function(){
          $(this).html("Test #" + (i++) 
    + "<br>document width=" + $(document).width() + ", windows width=" + $(window).width()
    + "<br>document width=" + $(document).width() + ", body width=" + $(document.body).width()
          );  
        });     
      </script>
    </body>
</html>

Any idea how to detect the presence of a horizontal scrollbar that also works after zooming in/out on a mobile device like iPad?

Walid
  • 1,262
  • 11
  • 10
  • possible duplicate of http://stackoverflow.com/questions/2059743/detect-elements-overflow-using-jquery – plalx Apr 19 '13 at 19:55
  • I tried the solution suggested on that post, works with chrome but with firefox, `$("body")[0].scrollWidth` and `$("body")[0].clientWidth` are equal even if there is an horizontal scrollbar. – Walid Apr 19 '13 at 20:12
  • @plalx Maybe the question is the same but IMO it's a lot more clear this one – laconbass Apr 19 '13 at 20:18
  • Have you solved this issue? – Naor Feb 05 '14 at 17:07

2 Answers2

7
//scrol 1px to the left
$(document).scrollLeft(1);

if($(document).scrollLeft() != 0){
   //there's a scroll bar
}else{
   //there's no scrollbar
}

//scroll back to original location
$(document).scrollLeft(0);

This works because JQuery won't be able to scroll the screen if no scrollbar is available

Pabs123
  • 3,385
  • 13
  • 29
  • 2
    functional but not elegant, IMO – laconbass Apr 19 '13 at 19:59
  • 1
    I like it because it's detecting object functionality instead of using math to theoretically determine if there is a scrollbar. I think it's more elegant, actually. – mrbinky3000 Oct 08 '13 at 15:19
  • @mrbinky3000 I agree on the fact that it's more correct detecting the functionality instead of theoretically calculations. I don't agree it's more elegant, elegance is not only the feature. Refactoring would change my opinion for sure ;) – laconbass May 05 '14 at 12:08
  • This solution works while `elem.get(0).scrollWidth > elem.width()` is failing for me in Chrome. +1 – tponthieux Jun 16 '14 at 21:29
  • Not working for this site http://keithclark.co.uk/articles/practical-css-parallax/horizontal-scroll/ for instance. – Seb D. Dec 01 '17 at 09:10
3

EDIT 2: I got a downvote because this doesn't work for nothing but the page so I built a generic solution based on @Pabs123's answer, only for fun:

function hasScrollX( selector ){
    var e = $(selector), fn = 'scrollLeft';
    return e[fn](1) && e[fn]() > 0 && e[fn](0) && true;
}

or even

jQuery.fn.hasScrollX = function( ){
    var fn = 'scrollLeft';
    return this[fn](1) && this[fn]() > 0 && this[fn](0) && true;
}

See it here, and how it can be easily adapted to detect vertical scrollbar presence.

EDIT: Tested & working on chrome and firefox. As jQuery team does the crossbrowsing work, i suggest the use of jQuery rather than native javascript.

I were curious about how to do this in an elegant way than the suggested previously (which actually work)

The following comparison work to me

$(document).width() > $(window).width()

you can see it in action with scroll bar and without it

laconbass
  • 17,080
  • 8
  • 46
  • 54