11

Using responsive Layout and a lot of CSS to create a Webpage, I am having a problem with scrollbars being hidden or shown and changing the layout by 17px.

The main problem is that on OSX the scrollbars hover over the entire Layout without affecting it, but in any browser on Windows for example the scrollbar is part of the layout and therefore moving it to the left by its width of 17px.

Trying to solve this I started to detect browsers like:

if($.browser.chrome) {
   // adapt layout by 17px
} else if ($.browser.mozilla) {
   // adapt layout by 17px
}  else if ($.browser.safari) {
   // dont adapt layout by 17px
}

But after reading a lot of posts on that topic, I realized that instead of detect the browser many people recommend feature detection. So is there a way to find out how the browser is handling the scrollbars? Whether they will be part of the pagelayout or they will just hover on top of everything like in safari?

Thanks for your help!

2
  • Depending on the version of jQuery that you're using $.browser() has been deprecated in favor of feature detection. You may want to look at something like modernizr.com for this. May 6, 2014 at 13:41
  • I did, it is indeed very useful when it comes to feature detection, but the information about the scrollbars i need seems too specific, at least I couldnt find it in the documentation of the Modernizr.
    – ibanes88
    May 6, 2014 at 14:05

2 Answers 2

8

This is easy to measure. On a scrollable element, the scrollbar thickness is simply:

var scrollbarWidth = scrollableEl.offsetWidth - scrollableEl.clientWidth;`

As explained very well by David Walsh. The scrollbar width/height is zero on:

  • OSX (unless the Mouse settings have been modified, or before Lion).

  • touch device browsers (Android, iOS, Windows Phone).

  • IE12 Edge in Tablet Mode (dynamically changeable, scrollbars show and hide and page redraws when Tablet mode is changed. I think the change is detectable by registering for the resize event and testing the scrollbar width).

  • Can be changed by CSS e.g. ::-webkit-scrollbar { width: 1em; } e.g. -ms-overflow-style: none (documentation).

  • May be zero if element is not in document yet (also maybe if script running in <head>?).

Other notes:

  • Modernizr has a hiddenscrollbar feature detection which detects if zero width scrollbars used.

  • Height difference should also measure this, but it wasn't reliable in IE8 (especially unreliable after resize event due to zoom change), so I have always used width difference.

  • If the width is non-zero, it can also change due to: (1) page zoom changes (width stays same as physical pixels on some browsers, therefore logical pixels changes. Although pinch-zoom acts differently), (2) Style changes like -webkit-scrollbar, (3) Desktop theme changes (widths different for major themes, or personalized themes).

Here are some links to testers:

2
  • Edge doesn't fire a resize event for tablet mode while maximized.
    – Timothy003
    Oct 31, 2016 at 13:35
  • Note that this method doesn't work if the element has a border
    – Fez Vrasta
    Jan 4, 2017 at 19:59
2

The hiddenscroll test should be what you are looking for in Modernizr. Its not in the main library yet, but you can build a custom version of the v3 beta (which includes this test) at v3.modernizr.com

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.