To put it simple, this is what i want (obtained on a Webkit Browser using -webkit-scrollbar) :
An
Google implemented something like this when showing their web apps.
With the help of the inspect element and copy-paste, I came with the codes below.
ul::-webkit-scrollbar-thumb {
background-color: red;
border: 4px solid transparent;
border-radius: 8px;
background-clip: padding-box;
}
ul::-webkit-scrollbar {
width: 16px;
}
ul {
overflow-y: scroll;
margin: 0;
padding: 0;
width: 350px;
max-height: 300px;
background-color: #ffffd;
border-radius: 8px;
}
li {
list-style-type: none;
padding: 13px;
}
<ul>
<li>google.com</li>
<li>facebook.com</li>
<li>twitter.com</li>
<li>instagram.com</li>
<li>linkedin.com</li>
<li>reddit.com</li>
<li>whatsapp.com</li>
<li>tumblr.com</li>
<li>skype.com</li>
</ul>
I don't consider myself a CSS expert, so hopefully, someone will explain how these things work.
Or you can check the docs on MDN:
slim with rounded corners
@-moz-document url-prefix() {
.scrollbar {
overflow: auto;
width: 0.5em !important;
scroll-behavior: smooth !important;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3) !important;
background-color: darkgrey !important;
outline: 1px solid slategrey !important;
border-radius: 10px !important;
}
}
::-webkit-scrollbar {
width: 0.5em !important;
scroll-behavior: smooth !important;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3) !important;
}
::-webkit-scrollbar-thumb {
background-color: darkgrey !important;
outline: 1px solid slategrey !important;
border-radius: 10px !important;
}
<div class="scrollbar" style="height: 600px">
<h1>Scrollbar is slim with rounded corners</h1>
<br/>
<br/>
<br/>
<br/>
<h1>Scrollbar is slim with rounded corners</h1>
<br/>
<br/>
<br/>
<br/>
<h1>Scrollbar is slim with rounded corners</h1>
</div>
I've been having the same issue. It's not the most elegant of solutions but, simply put a smaller div inside your outer box so the scroll bar doesn't overlap the outer box.
Like this code copied from this pen:
.box {
height: 200px;
width: 250px;
border-radius: 10px;
border: 2px solid #666;
padding: 6px 0px;
background: #ccc;
}
.box-content {
height: 200px;
width: 250px;
overflow: auto;
border-radius: 8px;
}
<div class="box">
<div class="box-content">
<ol>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ol>
</div>
</div>
Put the content that needs to be scrolled in a div
with overflow: auto
. Around that content div
put a div
with your rounded corners and overflow: hidden
.
Now you can see the scroll bar but its outer corners are hidden and
are not disturbing the rounded corners of the outer div
.
Example:
// Insert placeholder text
document.querySelector('.inner').innerHTML = 'Text<br>'.repeat(20);
.outer {
width: 150pt;
border: 1px solid red;
border-radius: 15pt;
overflow: hidden;
}
.inner {
height: 200px;
overflow-y: auto;
}
<div class="outer">
<div class="inner">
<!-- lots of text here -->
</div>
</div>
Would be nice if you could supply a fiddle. Nevertheless, you shoud try changing the box-sizing on the container to border-box (if not already done):
box-sizing: border-box;