Can somebody please help me? I want to do a simple style for the scrollbar. I found some information on the internet and tried it, but it seems that it doesn't really work for some reasons. The scrollbar looks fine when refreshing the page, but as soon as you touch the scrollbar it goes crazy. It fills with a lot of colours and you can't understand that that is a scrollbar.
Here how it looks before you touch it - http://i40.tinypic.com/a2evro.png
Here how it looks after you touch it - http://i44.tinypic.com/qzkirn.png
Here is the code that I put in css:
::-webkit-scrollbar { width: 16px; height: 16px; } ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.10),inset 0 -1px 0 rgba(0,0,0,0.07); }
Thank you all. Cheers. Alex
::-webkit-scrollbar is a pseudo-element in CSS employed to modify the look of a browser's scrollbar. Before we start with how it works and how can it be implemented, we need to know some facts about the element. Browsers like Chrome, Safari and Opera support this standard. Browsers like firefox don't support this.
To get Custom Scrollbars, open the extension on the Chrome Web Store within Google Chrome. Click the + Add to Chrome button on that webpage. Select the Add extensions option to confirm. If you don't see a Custom Scrollbars button on the URL toolbar after installing it, click the Extensions option.
As of 2020, 96% of internet users are running browsers that support CSS scrollbar styling. However, you will need to write two sets of CSS rules to cover Blink and WebKit and also Firefox browsers. In this tutorial, you will learn how to use CSS to customize scrollbars to support modern browsers.
::-webkit-scrollbar. Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
Here is an example that works:
::-webkit-scrollbar { height: 12px; width: 12px; background: #000; } ::-webkit-scrollbar-thumb { background: #393812; -webkit-border-radius: 1ex; -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75); } ::-webkit-scrollbar-corner { background: #000; }
Or you can use jScrollPane.
.invisible-scrollbar { scrollbar-width: none; } .invisible-scrollbar::-webkit-scrollbar { display: none; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With