2

I am trying to show the horizontal scrollbar for my overflow by default, but in chrome + macos, it doesn't seem to be working. In Safari it works just fine.

the html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="container">
        content that goes brrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
    </div>
</body>
</html>

the css (inline via style), on the parent container:

display: block;
width: 100px;
overflow: scroll

The screenshot:

enter image description here

If I manually click the box and slide...the scrollbar appears, but it's not the desired functionality.

Capagris
  • 3,811
  • 5
  • 30
  • 44

2 Answers2

1

This solution/hack seems to work for Chrome/Safari on Mac:

::-webkit-scrollbar {
        -webkit-appearance: none;
    }
    
    ::-webkit-scrollbar:vertical {    
        width: 12px;
    }
    
    ::-webkit-scrollbar:horizontal {    
        height: 12px;
    }
    
    ::-webkit-scrollbar-thumb {
        border-radius: 8px;
        border: 2px solid white;
        background-color: rgba(0, 0, 0, .5);
    }
    ::-webkit-scrollbar-track { 
        background-color: #fff; 
        border-radius: 8px; 
    }
Manoj De Mel
  • 927
  • 9
  • 16
0

So scrollbars are an OS and and application level setting depending on what you're using.

On mac I think you can turn them on and off for system screens, on chrome you used to be able to turn them on and off, but when I just went looking for the setting I couldn't find it in the latest version of chrome.

Unfortunately, beyond adding overflow: scroll to a div you have no other control over whether or not a scroll bar appears, and even if you get it to appear for yourself, there's zero guarantee that it will appear for your users.

You can check out this video of a guy changing his own Chrome settings (https://www.youtube.com/watch?v=VTLHxboMivM) but like I say, I just had a look in the current version and couldn't see it.

Brett East
  • 4,022
  • 2
  • 20
  • 31
  • also read about macos settings > preferences > always show scrollbars but that didn't work either. Can't find the scrollbars option anymore (just like you) so it looks like google is forcing the setting now? – Capagris Mar 08 '21 at 20:12
  • uh huh, new update is out and this experimental feature was removed: https://support.google.com/chrome/thread/22674161?hl=en – Capagris Mar 08 '21 at 20:17
  • @Capagris yeah, I mean I think that a lot of apps are moving away from visible scrollbars, particularly on MacOS. But importantly for your question, it's going to be user specific, so not something that you can force – Brett East Mar 08 '21 at 23:01