How to prevent a webkit-scrollbar from pushing over the contents of a div?

Question

I'm using webkit-scrollbar and am running into styling issues as the webkit scrollbar is pushing the contents of a div to the left which causes the contents to overflow.

Notice

1st box uses the default browser scrollbar and does not overflow (good)
2nd box uses the webkit scrollbar which ends up breaking the layout. (bad/problem)

http://jsfiddle.net/ryeah/1/

Any ideas what I'm doing wrong with webkit scrollbar to cause the div to/overflow. How can we fix the 2nd box? Thanks

Webkit Scrollbar Code:

.box2::-webkit-scrollbar {
    height: 16px;
    overflow: visible;
    width: 16px;
}
.box2::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    background-clip: padding-box;
    border: solid transparent;
    border-width: 1px 1px 1px 6px;
    min-height: 28px;
    padding: 100px 0 0;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1),inset 0 -1px 0 rgba(0, 0, 0, .07);
}
.box2::-webkit-scrollbar-button {
    height: 0;
    width: 0;
}
.box2::-webkit-scrollbar-track {
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 4px;
}
.box2::-webkit-scrollbar-corner {
    background: transparent;
}

would you mind updating the accepted answer to the higher-rated one below? — Andy, Oct 11 '16 at 16:41

score 97 · Answer 1 · answered Nov 16 '13 at 04:38

97

Did you try putting overflow-y:overlay in the parent div? It works for me in chrome. This page says it works in safari, too.

answered Nov 16 '13 at 04:38

Dex

987
7
4

4

seem's this should be the selected answer here. Works perfectly – atmd Dec 07 '15 at 12:42
2

Elegant solution. Like @EidanSpiegel said though, not working in Firefox. – perkrlsn Oct 09 '17 at 06:57
8

But the overlay is not transparent and a vertical scrollbar will block out any content that it overlays. Haven't found a way to make it transparent. – Johann Aug 23 '18 at 15:39
In my case, changing to `overflow-y:overlay` fixes Chrome and breaks Firefox. – cbdeveloper Feb 01 '21 at 17:38
Overflow: overlay is deprecated and doesn't work on Chrome anymore. Unfortunally, the alternative "scollbar-gutter" doesn't accomplish the same. – Tiago Peres França Jul 28 '23 at 20:14

score 7 · Answer 2 · answered Feb 01 '21 at 17:42

7

This is how I made it work on Chrome, and not break Firefox:

overflow: scroll;
overflow-x: hidden;
overflow-y: overlay;

I mean, the scroll bar is still taking width space on Firefox, but at least it's still showing and working.

By just doing overflow-y: overlay;, I was fixing Chrome and breaking my Firefox scroll.

answered Feb 01 '21 at 17:42

cbdeveloper

27,898
37
155
336

Thanks a lot! I had the same issue and couldn't understand what was wrong with my simple flexbox code. – Sandro Mar 02 '21 at 17:11
1

Also, I've added -moz to overflow-y: overlay. – Sandro Mar 02 '21 at 17:22
It works in webkit browsers but it is quite ugly in Firefox because the scrollbar area appears even the content is small and not needed scrollbar. – Necromancer Jul 07 '22 at 10:05

score 4 · Accepted Answer · answered Nov 20 '12 at 09:40

Hm.. I can't think of a way to get the webkit scrollbar in overlay. One solution to stop the line breaking is to hide the scrollbar with

.box2::-webkit-scrollbar {
  height: 16px;
  overflow: visible;
  width: 16px;
  display: none;
}

other you can set the width of your UL to the same as the box so it makes use of the overflow function and displays under the scrollbar

.box ul {
  width: 149px;
}

Edward Newsome · Answer 4 · 2016-10-19T18:19:15.227

1

There is a way to get the scroll bar to display outside the div.

Use a static width and have the div position as absolute. Works for me.

#divID{
overflow: hidden;
width: calc(1024px + 0);
}

#divID:hover{
overflow-y:scroll;
}

This fools the DOM.

edited Oct 19 '16 at 18:19

answered Apr 12 '15 at 00:00

Edward Newsome

723
7
15

How to prevent a webkit-scrollbar from pushing over the contents of a div?

4 Answers4

Linked