CODEWITHSUNDEEP
cssmacosgoogle-chrome
Capagris
Capagris

Reputation: 3841

chrome macOS horizontal scrollbar stays hidden no matter what (despite overflow:scroll)

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.

Upvotes: 3

Views: 3788

Answers (2)

Manoj De Mel
Manoj De Mel

Reputation: 995

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; 
    }

Upvotes: 1

Brett East
Brett East

Reputation: 4322

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.

Upvotes: 0

Related Questions