How to prevent scrollbars from hiding on OS X without impacting Windows users?

Question

I have a scrollable div. In OS X, the scrollbars auto-hide themselves, which is a bit prettier than always-visible scrollbars but sometimes confuses my users. The general response to this issue is to use ::-webkit-scrollbar:

How can I prevent scroll bars from being hidden for OS X trackpad users in WebKit/Blink?

CSS - Overflow: Scroll; - Always show vertical scroll bar?

http://blog.0100.tv/2012/11/webkit-scrollbars-on-os-x/

The trouble with these solutions is that they also impact Chrome users on Windows, and I'd like to keep Chrome users on Windows having the same scrolling experience they're used to.

Is there a way to either prevent the scrollbar from hiding on OS X without changing any scrollbar styling, or add something to my CSS so that this only affects Mac users?

Thanks!

Since you appear to want to let Chrome users have their scrolling experience, I would also advise you to let this be on OS X. Users there also prefer the scrolling experience they are used to, so you would be doing them a service if you just left things as they are. Surprised users are a sign of bad UX decision(s). That said, if you still are willing to go ahead and override users' preferred UI, do user agent sniffing with JavaScript -- looking for `Mac` or `Chrome` or whatever in the user agent string -- and apply CSS accordingly. If you want to know more, I can post an answer with details. — Armen Michaeli, May 05 '17 at 07:43

score 0 · Answer 1 · answered May 24 '17 at 14:12

I think the bast user experience is maintain the same appearance in Windows and Mac. You may use a plugin to make it pettier in both systems, such as NanoScroller:

Your HTML:

<head>
    <link rel="stylesheet" href="nanoscroller.css">
</head>
<body>
    <!-- Your Element -->
    <div id="about" class="nano">
        <div class="nano-content">
            <!-- Your content -->
        </div>
    </div>
    <script src="jquery.js"></script>
    <script src="nanoscroller.js"></script>
    <script src="all.js"></script>
</body>

Your JS (all.js)

$(function(){
    // binding nanoScroller.
    $('.nano').nanoScroller({ alwaysVisible: true });
})

See the entire Doc here: https://jamesflorentino.github.io/nanoScrollerJS/

score 0 · Answer 2 · answered Aug 02 '20 at 06:00

You have to hide the default scrollbar and create a one by your self. Please check the following code. This is will always show scrollbars.

.container {max-height: 200px; border: 1px solid #dadada; overflow: auto;}

/* Overwrite the default to keep the scrollbar always visible */

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

<div class="container">
<ul>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
</ul>
</div>

How to prevent scrollbars from hiding on OS X without impacting Windows users?

2 Answers2