CODEWITHSUNDEEP
htmlcss
Fizzix
Fizzix

Reputation: 24375

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

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

Upvotes: 1

Views: 2823

Answers (1)

4dgaurav
4dgaurav

Reputation: 11506

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.

Upvotes: 3

Related Questions