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

Community · Accepted Answer · 2017-05-23 10:26:13Z

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, 2017 at 10:26

CommunityBot

11 silver badge

answered Jun 25, 2014 at 6:09

4dgaurav

11.5k4 gold badges35 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Fizzix Over a year ago

Is there also a Firefox/Mozilla and IE solution?

4dgaurav Over a year ago

You can refer this stackoverflow.com/questions/9251354/…

Fizzix Over a year ago

@Mr_Green - Unfortunately, I would still like to keep the scroll bar within the div.

Mr_Green Over a year ago

@fizzix this will be the closest to your solution. Fiddle.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related