jquery - Detect different kind of scrollbars (eg. normal / hidden osx) -


Using the responsive layout and CSS to create a webpage, the scrollbar is hidden or shown and is changing. Layout by 17px

The main problem is that the scrollbar on the OSX rotates on the whole layout without affecting it, but in any browser of Windows, the scrollbar is a part of the layout and therefore taking it is 17px Width to left

I'm trying to solve it, like I started looking for the browser:

  if ($. Browser.chrome) {// Customizable Layout 17px} And if ($ .browser.mozilla) {// customizable layout 17px} and if ($ .browser.safari) {// optimization layout at sight 17px}  

but after that topic Reading many posts, I realized that instead of finding a browser, many people recommend finding the feature. So is there a way to find out how the browser scrollbar is handling? Whether they are part of the paglayout or they all go up just like the safari

Thank you for your help!

It is easy to measure on scrollable elements, scrollbar thickness is simply:

  var scrollbarWidth = scrollableEl.offsetWidth - scrollableEl.clientWidth; According to David Walsh the scrollbar's width / height is zero:  
  • OSX (unless the mouse settings are modified, or the lion before that).

  • IE 12 edge in tablet mode (dynamically unstable, shows scrollbar and hide and page radios when tablet mode changes).

  • It looks like the change can be detected by registering for the resizing event and testing the width of the scrollbar.)

  • CSS can be changed from :: - WebKit-scrollbar {width: 1em; } Example -MS-overflow-style: none ().

  • If the element is not yet in the document (it may also be that the script & lt; head & gt; ?) May be zero.

Other notes:

  • A hiddenscrollbar feature has been detected in Moderjarger, which detects that if the zero width scrollbar Is used.

  • The difference in height should also be measured, but it was not reliable in IE8 (especially unreliable because after changing the size of the event due to zoom changes), I always used the width it used.

  • If the width is zero, then due to the reasons: (1) page zoom change (width is just like physical pixels, some browsers, therefore logical pixel changes. Although the pin-zoom works differently), (2) changes in style such as -webkit-scrollbar , (3) desktop theme changes (different widths for major topics, or individual themes) ).

Here are some links to the testers:

  • Something simple (possibly to make Div permanent to avoid the referee Better

  • Which gives AFAIK hiddenscrollbar as correct if the scrollbarwidth is zero (see also cssscrollbar).

  • Something


Comments

Popular posts from this blog

Pass DB Connection parameters to a Kettle a.k.a PDI table Input step dynamically from Excel -

multithreading - PhantomJS-Node in a for Loop -

c++ - MATLAB .m file to .mex file using Matlab Compiler -