Chrome reserves space for scrollbar even if it is hidden

Question

I have run into an issue on webkit browsers (IE and FF are ok) where the scrollbar space is reserved for an element even though the scrollbar is not showing. You can see in the example that once the middle one is hovered the scrollbar space is still reserved. I am just wondering if this an issue with Chrome or just part of the HTML/CSS spec. This similar question provides a fix but it doesn't explain if it is a bug or not and having to set an explicit width on the children is not what I want to do.

        .hidden-scroll {
            background: black;
            overflow-y: hidden;
            height: 400px;
            width: 300px;
        }

        .hidden-scroll:hover {
            overflow-y: auto;
        }

        .no-hover.hidden-scroll:hover {
            overflow-y: hidden;
        }

        .hidden-scroll-content {
            background: red;
            height: 50px;
        }

<body>
<div>No scroll needed</div>


<div class="hidden-scroll">
    <div class="hidden-scroll-content">1</div>
    <div class="hidden-scroll-content">2</div>
    <div class="hidden-scroll-content">3</div>
    <div class="hidden-scroll-content">4</div>
</div>

<div>Scroll on hover</div>

<div class="hidden-scroll">
    <div class="hidden-scroll-content">1</div>
    <div class="hidden-scroll-content">2</div>
    <div class="hidden-scroll-content">3</div>
    <div class="hidden-scroll-content">4</div>
    <div class="hidden-scroll-content">5</div>
    <div class="hidden-scroll-content">6</div>
    <div class="hidden-scroll-content">7</div>
    <div class="hidden-scroll-content">8</div>
    <div class="hidden-scroll-content">9</div>
    <div class="hidden-scroll-content">10</div>
    <div class="hidden-scroll-content">11</div>
    <div class="hidden-scroll-content">12</div>
</div>

<div>No scroll on hover</div>

<div class="no-hover hidden-scroll">
    <div class="hidden-scroll-content">1</div>
    <div class="hidden-scroll-content">2</div>
    <div class="hidden-scroll-content">3</div>
    <div class="hidden-scroll-content">4</div>
    <div class="hidden-scroll-content">5</div>
    <div class="hidden-scroll-content">6</div>
    <div class="hidden-scroll-content">7</div>
    <div class="hidden-scroll-content">8</div>
    <div class="hidden-scroll-content">9</div>
    <div class="hidden-scroll-content">10</div>
    <div class="hidden-scroll-content">11</div>
    <div class="hidden-scroll-content">12</div>
</div>


</body>

This might be a bug in Blink & Webkit. You should definately report this. I tested in Firefox only and it behaves correctly. I made a few more tests and Chrome seems to work correctly with text only. This is correct behavior http://jsfiddle.net/650pyaq2/1/ This is wrong behavior http://jsfiddle.net/re4o23zr/ — user3448600, Sep 19 '14 at 22:46

score 2 · Answer 1 · answered Sep 25 '17 at 08:43

2

If you don't want the scroll bar to be seen, try (worked for me)

.class::-webkit-scrollbar {
 display : none;
}

answered Sep 25 '17 at 08:43

Vishnu

1,611
1
14
27

score 2 · Answer 2 · answered Jan 10 '19 at 08:10

2

Using overflow: hidden; inside of the ::-webkit-scrollbar worked for me.

[className]::-webkit-scrollbar {
  overflow: hidden;
}

You can read more about it here: ::-webkit-scrollbar.

answered Jan 10 '19 at 08:10

score 0 · Answer 3 · answered Apr 28 '15 at 22:51

Seems like a bug, I noticed that after resetting item's width (to any value auto/100%) box is redrawn and layed out correctly until another hover, well, for a moment how about some hacky hack? Hacky demo

.wrapper {
    height:400px;
    width:300px;
    overflow:hidden;
}

.wrapper:hover .hidden-scroll {
    width:300px;
}

.wrapper:hover .hidden-scroll div {
    padding-right:0;
}

.hidden-scroll {
  background: black;
  overflow-y: auto;
  overflow-x: hidden;
  height: 400px;
  width: 330px;
}

.hidden-scroll div {
  background: red;
  height: 50px;
  width: auto;
  padding-right:30px;
}

score 0 · Answer 4 · answered Aug 07 '16 at 01:56

I was running into a situation just like yours (I think), where I wanted the scrolling ability but I didn't want scroll bars. I also had put in custom < and > paging controls at the ends of the visible areas to page through the scrollable area. So the scroll bars were just annoying me.

You can turn the scroll bars off for a given class with:

.class::-webkit-scrollbar {
   width: 0 !important;
   height: 0 !important;
}

without the hight: 0, I was seeing a blank area the height of the scroll bar and it was eating into the content. Once I added the height:0 into this CSS it went away and things are good.

Hope this helps.

Now I am off to see if I can find the same thing for Edge, IE and Firefox. This works on Chrome and Safari.

score 0 · Answer 5 · edited Aug 26 '21 at 12:37

0

it needs to be replaced with:

overflow: hidden;

instead. because it is saying the overflow of it is hidden, But is still able to scroll down the box, And what Vishnu said, You need to do display: none; that is saying don't display anything.

edited Aug 26 '21 at 12:37

Alessio

3,404
19
35
48

answered Nov 03 '18 at 23:31

PIZZZZZZZZZZZA is here

137
8

MTarantini · Answer 6 · 2021-03-17T17:18:01.907

I've seen this nagging issue on Ionic 5, but only on Windows and Chrome. The solution I found was to add this in global.scss within app-root:

ion-content {
  width: 102% // Solve empty space left for scrollbar on Windows/Chrome
}

Doesn't actually misalign much on the page, so I didn't need to adjust anything else. If you do need to, please post your modification.

UPDATE - Decided to fix the space on the right by doing:

--padding-end: 2%; // Solve empty space left for scrollbar on Windows/Chrome

Chrome reserves space for scrollbar even if it is hidden

6 Answers6

Linked