React-custom-scrollbars: autoHide={false} not work in Chrome browser, Mac

Created on 30 May 2016  路  4Comments  路  Source: malte-wessel/react-custom-scrollbars

seems like auto hide scrollbar feature is depending on Mac OS's default behavior.
that's why autoHide={false} doesn't work in Mac (either of safari or chrome)

scrollbar keeps being hidden automatically after scrolling.

question

All 4 comments

Is it possible, that you have activated the OSX overlay scrollbars? In this case you won't see the custom scrollbars, since we cannot hide the OSX overlay scrollbars for various reasons.

@malte-wessel what is the reasoning behind this? It would be better if we could have the same scrollbars in all browser/os. For example we put our scrollbars on the left in some cases. See http://i0.wp.com/austcadblog.com/wp-content/uploads/2014/05/rendering-in-fusion.png for an example of a component (the tree on the left) where we might want a scroll view to have a left-handed scrollbar so we would never want the OS X one showing.

The Scrollbars component works like this:

  • We once check the size of the browser's native scrollbars by creating a div with a certain width and overflow: scroll. The difference between the set width and the actual width of the div tells us the width of the browser's native scrollbars (e.g. 15px).
  • We can then hide the native scrollbars by setting negative margins of -15px to the right and the bottom.
  • Its advantage is that we can use the browser native scrolling behaviour instead of mimicking it (which is fairly hard.)
  • As a last step we render our custom scrollbars based on the view's dimensions.

The problem with the OSX overlay scrollbars is, that we cannot test it's width, because actual width and set width (see first step) will be the same. So, we got a difference of 0px.
If that's the case, we don't do anything, so the overlay scrollbars are shown.
(This is also the case on mobile devices)

If you have any idea, how we could test native overlay scrollbars, let me know.

Related: #21

Closing this for now

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Niryo picture Niryo  路  3Comments

anupmishra203 picture anupmishra203  路  3Comments

dusanstojanovic picture dusanstojanovic  路  3Comments

hank7444 picture hank7444  路  5Comments

elinake picture elinake  路  4Comments