CabConModding
Facebook
Twitter
youtube
Discord
Contact us
RSS
Menu
CabConModding
Home
New
Top
Premium
Rules
FAQ - Frequently Asked Questions
Games
Fornite
Call of Duty: Black Ops 3
Clash of Clans
Grand Theft Auto 5
Apex Legends
Assassin’s Creed Origins
Forums
Premium
Latest posts
What's new
Latest posts
New profile posts
Latest activity
Members
Current visitors
New profile posts
Log in
Register
What's new
Premium
Latest posts
Menu
Log in
Register
Navigation
Install the app
Install
More options
Dark Theme
Contact us
Close Menu
Forums
Tech Boards
Web Development
HTML/CSS
HTML/CSS Tutorials
Custom HTML Scrollbar
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Reply to thread
Message
<blockquote data-quote="Kyle Fardy" data-source="post: 26607" data-attributes="member: 12678"><p>Ever Wandered How Some Websites Have A Custom Scrollbar?</p><p></p><p>Well Today Im Going To Show You How!</p><p></p><p>So Lets Get Into It.</p><p></p><p>First Open An IDE Of Your Choice (Notepad++, Sublime, Visual Studio Code, Or Just Notepad)</p><p></p><p>Create A Document Called [CODE]sidebar.css[/CODE]</p><p></p><p>Then Save It!</p><p></p><p>Now Open The sidebar.css File And Add This To It</p><p></p><p>[CODE]</p><p>::-webkit-scrollbar {</p><p> width: 12px;</p><p>}</p><p></p><p>::-webkit-scrollbar-track {</p><p> -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);</p><p> border-radius: 10px;</p><p> background-color:#05a34e;</p><p>}</p><p></p><p>::-webkit-scrollbar-thumb {</p><p> border-radius: 10px;</p><p> -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);</p><p> background-color:#1e991e;</p><p>}</p><p>[/CODE]</p><p></p><p>You May Change The [CODE]background-color:#1e991e;[/CODE]</p><p></p><p>To Any Color You Want Providing Its In Either A HEX Format Or A RGB / RGBA Format.</p><p></p><p>This Is What Hex Formatting Looks Like</p><p>[SPOILER]</p><p>[CODE] #FF0000; //RED [/CODE]</p><p>[/SPOILER]</p><p></p><p>This Is What RGB Formatting Looks Like</p><p>[SPOILER]</p><p>[CODE] rgb(255, 0, 0); //RED [/CODE]</p><p>[/SPOILER]</p><p></p><p>This Is What RGBA Formatting Looks Like</p><p>[SPOILER]</p><p>[CODE] rgba(255, 0, 0, 0.3); //RED [/CODE]</p><p>[/SPOILER]</p><p></p><p>Now Once You Have Added That To The [CODE]sidebar.css[/CODE]</p><p></p><p>Save It!</p><p></p><p>Now To Go Your Server / Website (FTP / File Manager)</p><p></p><p>Create A Folder Called [CODE]sidebar[/CODE]</p><p></p><p>Now Upload The File To Anywhere On Your Server / Website (FTP / File Manager)</p><p></p><p>Now Add This To The Web Page You Want The Scrollbar To Show On</p><p></p><p>[CODE]<link rel="stylesheet" href="sidebar/sidebar.css">[/CODE]</p><p></p><p>Make Sure To Add It Anywhere Between </p><p></p><p>[CODE] <head> [/CODE]</p><p></p><p>And</p><p></p><p>[CODE] </head> [/CODE]</p><p></p><p></p><p>Now You Should Be Presented With Something Like This</p><p></p><p>(My Website Has A Dark Grey & Green Colour Effect So I Made My Scrollbar Green)</p><p></p><p><img src="https://image.prntscr.com/image/OxSYCbFwSgqLc-O5uPLExQ.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p></p><p>As You Can See, This Custom Scrollbar Tutorial Doesn't Just Change The Scrollbar On The Side!</p><p></p><p>It Changes Any Scrollbar That Is On Your Web Page</p><p></p><p></p><p></p><p>Well That's All For Today Guys,</p><p></p><p>If You Have Any Questions Don't Hesitate To Contact Me</p></blockquote><p></p>
[QUOTE="Kyle Fardy, post: 26607, member: 12678"] Ever Wandered How Some Websites Have A Custom Scrollbar? Well Today Im Going To Show You How! So Lets Get Into It. First Open An IDE Of Your Choice (Notepad++, Sublime, Visual Studio Code, Or Just Notepad) Create A Document Called [CODE]sidebar.css[/CODE] Then Save It! Now Open The sidebar.css File And Add This To It [CODE] ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color:#05a34e; } ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); background-color:#1e991e; } [/CODE] You May Change The [CODE]background-color:#1e991e;[/CODE] To Any Color You Want Providing Its In Either A HEX Format Or A RGB / RGBA Format. This Is What Hex Formatting Looks Like [SPOILER] [CODE] #FF0000; //RED [/CODE] [/SPOILER] This Is What RGB Formatting Looks Like [SPOILER] [CODE] rgb(255, 0, 0); //RED [/CODE] [/SPOILER] This Is What RGBA Formatting Looks Like [SPOILER] [CODE] rgba(255, 0, 0, 0.3); //RED [/CODE] [/SPOILER] Now Once You Have Added That To The [CODE]sidebar.css[/CODE] Save It! Now To Go Your Server / Website (FTP / File Manager) Create A Folder Called [CODE]sidebar[/CODE] Now Upload The File To Anywhere On Your Server / Website (FTP / File Manager) Now Add This To The Web Page You Want The Scrollbar To Show On [CODE]<link rel="stylesheet" href="sidebar/sidebar.css">[/CODE] Make Sure To Add It Anywhere Between [CODE] <head> [/CODE] And [CODE] </head> [/CODE] Now You Should Be Presented With Something Like This (My Website Has A Dark Grey & Green Colour Effect So I Made My Scrollbar Green) [IMG]https://image.prntscr.com/image/OxSYCbFwSgqLc-O5uPLExQ.png[/IMG] As You Can See, This Custom Scrollbar Tutorial Doesn't Just Change The Scrollbar On The Side! It Changes Any Scrollbar That Is On Your Web Page Well That's All For Today Guys, If You Have Any Questions Don't Hesitate To Contact Me [/QUOTE]
Verification
Post reply
Forums
Tech Boards
Web Development
HTML/CSS
HTML/CSS Tutorials
Custom HTML Scrollbar
This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
By continuing to use this site, you are consenting to our use of cookies.
Accept
Learn more…
Top