Here’s my solution to implementing a modern, rounded scrollbar.
::-webkit-scrollbar is a pseudo-element in CSS employed to modify the look of a browser’s scrollbar. Chrome, Edge, and Safari support this standard while Firefox doesn’t.
The code:
/* width */
/* set the width of the scrollbar */
::-webkit-scrollbar {
width: 10px;
}
/* Handle */
/* set the color of the scrollbar and the radius of its corners */
::-webkit-scrollbar-thumb {
background: rgb(150, 150, 150);
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
}
/* Handle on hover */
/* set the color of the scrollbar when hovered over */
::-webkit-scrollbar-thumb:hover {
background: rgb(131, 131, 131);
}
/* Handle on active */
/* set the color of the scrollbar when clicked */
::-webkit-scrollbar-thumb:active {
background: rgb(104, 104, 104);
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Rounded Scrollbar Example</h1>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
</body>
</html>
Here I implement a trivial solution
div {
width: 300px;
height: 300px;
margin: 10px auto;
overflow-y: auto;
background: #f6f6f6;
padding: 10px;
border-radius: 10px;
}
::-webkit-scrollbar {
width: 14px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
border-radius: 10px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione ipsa enim modi quam rem autem optio? Distinctio inventore magnam iste consequuntur doloribus aut voluptas labore sit est repellendus beatae at!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum ea repellat impedit optio unde modi laudantium non dolor vel saepe consequatur doloremque nam velit. Veritatis distinctio rerum fugiat neque suscipit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci dolore cum quod quam optio tenetur numquam facilis non soluta magnam maxime at asperiores libero incidunt commodi. Debitis voluptatum nulla sequi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit modi incidunt officia ducimus obcaecati ipsum doloremque soluta sed cumque consectetur quas quod quam praesentium porro qui veritatis at! Itaque minima.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat consectetur iusto maiores excepturi soluta consequuntur consequatur quae nobis nisi expedita corporis numquam eligendi labore rem modi tempora autem eveniet ratione.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolorem laborum velit impedit optio laboriosam veritatis quos eaque eveniet dicta nisi ducimus minus accusantium amet corporis nostrum at rem. Voluptate!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla eaque quisquam reiciendis excepturi dolor ducimus inventore itaque totam minus nam laborum iure eius quod odit ullam ad eveniet eos.
</div>
I wrapped your scroll items with another div and have a class content. Check your sizing for the container div, as well as the content div. Also, I added the overflow: scroll on the container, which in this case is testo1.
.clientimenu::-webkit-scrollbar {
width: 8px;
border-radius: 25px;
}
.clientimenu::-webkit-scrollbar-track {
background: linear-gradient(171deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
.clientimenu::-webkit-scrollbar-thumb {
background: #4a71ff;
border-radius: 8px;
background-clip: padding-box;
}
.clientimenu::-webkit-scrollbar-thumb:hover {
background: #1447ff;
}
#content {
width: 150px;
height: 75px;
}
#testo1 {
width: 150px;
height: 75px;
overflow: scroll;
}
<div class="animate__animated animate__fadeInRight" style="margin-right: 2%; animation-delay: 0.2s;">
<div class="menu" id="menu-drop">
<span class="select" >Select an option</span>
<div class="menu__icon-box">
<div class="menu__icon"></div>
</div>
<div class="menu__dropdown ricerca1 riduzione clientimenu" id="testo1">
<div id="content" >
<input type="text" class="barra-ricerca-clienti" placeholder=" Search..." id="myInput" onkeyup="filterFunction1()">
<div class="menu__dropdown-coption" id="t1" value="test1">test1</div>
<div class="menu__dropdown-coption" id="t2" value="test2">test2</div>
<div class="menu__dropdown-coption" id="t3" value="test1">test1</div>
<div class="menu__dropdown-coption" id="t4" value="test2">test2</div>
<div class="menu__dropdown-coption" id="t5" value="test1">test1</div>
<div class="menu__dropdown-coption" id="t6" value="test2">test2</div>
<div class="menu__dropdown-coption" id="t7" value="test1">test1</div>
<div class="menu__dropdown-coption" id="t8" value="test2">test2</div>
<div class="menu__dropdown-coption" id="t9" value="test1">test1</div>
<div class="menu__dropdown-coption" id="t10" value="test2">test2</div>
</div>
</div>
</div>
</div>
I’ve been freaking out for over 2 days, I can’t create a scrollbar (css + html) that follows my rounded edge.
someone have some tips?
This is my code and a screenshot…
if you need some more code i’ll paste it here
i need the scrollbar to follow the border-radius.
.clientimenu::-webkit-scrollbar {
width: 8px;
border-radius: 25px;
}
.clientimenu::-webkit-scrollbar-track {
background: linear-gradient(171deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}
.clientimenu::-webkit-scrollbar-thumb {
background: #4a71ff;
border-radius: 8px;
background-clip: padding-box;
}
.clientimenu::-webkit-scrollbar-thumb:hover {
background: #1447ff;
}
<div class="animate__animated animate__fadeInRight" style="margin-right: 2%; animation-delay: 0.2s;">
<div class="menu" id="menu-drop">
<span class="select">Select an option</span>
<div class="menu__icon-box">
<div class="menu__icon"></div>
</div>
<div class="menu__dropdown ricerca1 riduzione clientimenu" id="testo1">
<input type="text" class="barra-ricerca-clienti" placeholder=" Search..." id="myInput" onkeyup="filterFunction1()">
<div class="menu__dropdown-coption" id="t1" value="test1">test1</div>
<div class="menu__dropdown-coption" id="t2" value="test2">test2</div>
</div>
</div>
</div>
Hi dmoro. Currently your demo has no scroll bar, or any styles, it looks like.
