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)
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;
}
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;
}
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.
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.
Tags: scroll