How to hide the corners of a scroll bar when using scroll as overflow

Question

So basically, I have an absolute positioned div, with a heap of children. This div is horizontally scrollable to see its overflow. Although, the scrollbar is hanging off the bottom and therefore preventing the bottom border-radius from being seen.

HTML:

<ul>
    <li><a>List Item Here</a></li>
    <li><a>List Item Here</a></li>
    <li><a>List Item Here</a></li>
    <li><a>List Item Here</a></li>
    <li><a>List Item Here</a></li>
    <li><a>List Item Here</a></li>
    <li><a>List Item Here</a></li>
</ul>

CSS:

ul {
    left: 0px;
    right: 0px;
    position: absolute;
    border-radius: 16px;
    overflow-x: scroll;
    background-color:black;
}
li {
    display: inline-block;
    color:white;
    padding-top:20px;
    padding-bottom:20px;
}

Is there a way to add a border radius to the scrollbar to match the element? Or can I possibly hide the overflow on it?

EXAMPLE HERE

score 3 · Accepted Answer · edited May 23 '17 at 10:26

3

Demo

css

::-webkit-scrollbar {
    width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 16px;
    border-radius: 16px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 16px;
    border-radius: 16px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0.4); 
}

Source

For more on the CSS customized scroll bar in div

Also using jscrollpane is good alternative http://jscrollpane.kelvinluck.com/

PS : Scrollbar CSS styles are not part of the W3C standard for CSS and therefore most browsers just ignore them.

edited May 23 '17 at 10:26

Community

1
1

answered Jun 25 '14 at 06:09

4dgaurav

11,360
4
32
59

Is there also a Firefox/Mozilla and IE solution? – Fizzix Jun 25 '14 at 06:13
You can refer this http://stackoverflow.com/questions/9251354/css-customized-scroll-bar-in-div/14150577#14150577 – 4dgaurav Jun 25 '14 at 06:20
@Mr_Green - Unfortunately, I would still like to keep the scroll bar within the div. – Fizzix Jun 25 '14 at 06:40
@fizzix this will be the closest to your solution. [**Fiddle**](http://jsfiddle.net/VLV49/4/). – Mr_Green Jun 25 '14 at 06:47

How to hide the corners of a scroll bar when using scroll as overflow

1 Answers1