Make scrollbar track transparent in Firefox
Try this code.
.scrollbar {
width: 500px;
height: 150px;
overflow-y: scroll;
scrollbar-color: grey transparent;
scrollbar-width: thin;
}
.scrollbar::-webkit-scrollbar-track
{
box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: transparent;
}
.scrollbar::-webkit-scrollbar
{
width: 6px;
background-color: #F5F5F5;
}
.scrollbar::-webkit-scrollbar-thumb
{
border-radius: 10px;
box-shadow: inset 0 0 5px rgba(0,0,0,.3);
background-color: grey;
}
<div class="scrollbar">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum semper tortor at pellentesque. Suspendisse iaculis quis risus in sagittis. Vestibulum elementum pulvinar vulputate. Morbi rutrum nisl eget finibus efficitur. Donec sed pellentesque purus. Nam vel euismod quam. Quisque lobortis aliquet nibh nec placerat. Maecenas volutpat orci dolor, mollis elementum tortor efficitur malesuada.Ut elementum sagittis lorem, non tempus diam euismod eu. Nullam vel diam ornare, aliquet enim non, sodales nulla. Pellentesque molestie, felis id pellentesque mattis, purus metus ultrices ipsum, vitae tristique nunc ante a odio. Quisque malesuada, felis sed tempor feugiat, est ante hendrerit sem, a porta elit metus ac est. Nullam sed felis leo. Donec ac vehicula dolor. Duis vel lacus volutpat, congue leo et, congue ex. Nullam rhoncus orci ut odio rutrum, id hendrerit elit malesuada. Curabitur orci neque, mollis ut aliquam a, dictum vitae massa. Donec efficitur ornare varius. Aliquam vulputate pharetra tortor nec finibus.
</div>
webkit scrollbar with transparent background
Im using a jQuery scrollbar now, and it works very well, and this is my solution, for my own question.
Related Topics
Why Does CSS Not Support Negative Padding
Convert Embedded Svg to Png In-Place
Ie Compatibility Mode: 'X-Ua-Compatible' Tag 'Edge'
CSS Overflow Hidden with Absolute Position
Items That Span All Columns/Rows Using CSS Grid Layout
Preserve Line Breaks in Textarea
Make an Image Width 100% of Parent Div, But Not Bigger Than Its Own Width
Github Pages and Relative Paths
Can HTML5 Communicate with Peripherals Like Scanners and Credit Card Readers
How to Get Equal Width of Input and Select Fields
Prevent a Child Element from Overflowing Its Parent in Flexbox
Youtube Video Header Background
Force <A Download /> to Download Image Instead of Opening Url Link to Image
How to Center Buttons in Twitter Bootstrap 3
What Does The Question Mark at Then End of a CSS Include Url Do