How to hide overflow scrollbar on Microsoft Chrome when there is no where to scroll?

Question

Is there a way to hide the scroll bars for Microsoft Chrome, and only hide them when there is no where to scroll? The following div/styles always display the scroll bar, horizontal and vertical. Even when the height is larger than the content.

<div style="background: red; width: 200px; height: 100px; overflow: scroll">
  This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.This is a test. This is a test. This is a test. This is a test. This is a test.This is a test. This is a test. This is a test. This is a test. This is a test.This is a test. This is a test. This is a test. This is a test. This is a test.
</div>

The following hides the scroll bar:

::webkit-scrollbar{
   display:none
}

But I want them to show when there is somewhere to scroll

Is there also a way to hide only the horizontal scroll bar?

"_Microsoft Chrome_"?? Do you mean you've Chrome installed on Windows? — Teemu, Feb 07 '20 at 20:42
use `auto` instead of `scroll` to let scrollbar show only when something is scrollable. and if you don't need the scrollbar at all remove `overflow` property at all. — DohaHelmy, Feb 07 '20 at 20:46
`::webkit-scrollbar{ display:none }` hides all scrollbars on webkit browsers (chrome on Windows and Linux and all browsers on macOS) you shouldn't use that — volt, Feb 07 '20 at 20:55

keyhan · Accepted Answer · 2020-02-07T20:47:20.167

2

Use the overflow-y property and set it to auto to enable the vertical scrollbar when it's needed.

Set overflow-x to hidden to disable horizontal scrolling altogether.

edited Feb 07 '20 at 20:47

answered Feb 07 '20 at 20:43

keyhan

247
1
6

score 1 · Answer 2 · answered Feb 07 '20 at 21:06

Let me explain your code, you have mentioned the height for your container so whenever the content exceeds that it shows up the scroll bar. If you remove those there won't be a scroll bar.

Else mentions overflow: auto so that when it exceeds the specific height it shows up the scroll bar. Here's the code below if you go full size there won't be a scroll bar.

div{
background: red; width: 200px;overflow:auto;}

<div >
  This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.
</div>

Now in the case of horizontal and vertical, there were CSS rules specific to that. overflow-x and overflow-y

To hide the horizontal bar .. here you go ;)

   .vertical-scroll{
     width:100px;height: 100px; overflow-y: scroll;overflow-x:hidden;}

<h1>Hide horizontal scroll</h1>
           <div class="vertical-scroll" >
            This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.This is a test. This is a test. This is a test. This is a test. This is a test.This is a test. This is a test. This is a test. This is a test. This is a test.This is a test. This is a test. This is a test. This is a test. This is a test.
          </div>

score -2 · Answer 3 · answered Feb 07 '20 at 21:04

Set overflow-x: auto;overflow-y: auto; on div, it shows scrollbars only if they are needed. (From this post) So your final code should look like:

<html>
<head>
<style>
::webkit-scrollbar{
   display:none
   
}
</style>
</head>
<body>
<div style="background: red; width: 200px; height: 100px; overflow: scroll;overflow-x: auto;overflow-y: auto;">
  This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.This is a test. This is a test. This is a test. This is a test. This is a test.This is a test. This is a test. This is a test. This is a test. This is a test.This is a test. This is a test. This is a test. This is a test. This is a test.
</div>
</body>
</html>

How to hide overflow scrollbar on Microsoft Chrome when there is no where to scroll?

3 Answers3