Chrome reserves space for scrollbar even if it is hidden

Asked 19/9, 2014 at 21:47 Answered 10/3, 2021 at 19:57

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>

Pentup answered 19/9, 2014 at 21:47 Comment(1)

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 jsfiddle.net/650pyaq2/1 This is wrong behavior jsfiddle.net/re4o23zr – Lynnett 19/9, 2014 at 22:46

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

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

Loupe answered 25/9, 2017 at 8:43 Comment(0)

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.

Counterblow answered 10/1, 2019 at 8:10 Comment(0)

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

Rheotaxis answered 28/4, 2015 at 22:51 Comment(0)

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.

Spake answered 7/8, 2016 at 1:56 Comment(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.

Earmark answered 3/11, 2018 at 23:31 Comment(0)

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

Flighty answered 10/3, 2021 at 19:57 Comment(0)

Recommended topics

Hot tags