Now, if you want to change it. Go to your CSS, or find this in your HTML <style> / <style type=css""> and copy paste the code above.
::-webkit-scrollbar { (THIS IS FOR STYLE OF THE SCROLLBAR ITSELF)
width: 10px; (HOW THICK YOU WANT IT TO BE)
background: #000000; (THE BACKGROUND OF THE SCROLLBAR)
}
::-webkit-scrollbar-thumb {
background: #458eff; (THE COLOR OF THE SCROLLBAR)
border-radius: 5px; (HOW CIRCLE YOU WANT YOUR SCROLLBAR TO LOOK LIKE)
}
You can use this website for the color codes.
Disclaimer: The code is not mine, I just heavily tweaked it from the owner.
as requested, here’s quick tutorial on how to make custom scrollbars.
So, a custom scrollbar is only available in webkit browsers (Chrome, Safari, and Opera). This means that any other browser will not display the scrollbar and will just use the default.
In your css, you’ll need, you’ll need to add the pseudo-element ::webkit-scollbar.
A pseudo element is used to style parts of an element. It essentially allows you to create a new type of element that you wouldn’t be able to use normally. this is different from a pseudo class, which adds styling to a specific conditions of an element (like :hover and :nth-child).
So, for a custom scrollbar, you’ll need to include ::webkit-scrollbar to set the width of the scrollbar you’re making. You can also set the height if you want to style a horizontal scrollbar.
Please do not make your scrollbar tiny. While it’s a common aesthetic in some themes, this makes it very hard to use. You don’t want your users struggling to navigate your theme.
Then you can use ::webkit-track . the track is the background/area that your scrollbar can go up and down.
::webkit-thumb is the part of the scrollbar you click and drag.
With ::webkit-thumb, you can add pseudo classes to it to style it whenever someone hovers over it and/or selects it.
Examples under the cut!
Now only setting the width and track and thumb colors, you get a basic scrollbar like thi
::-webkit-scrollbar {
width: 10px;
background: #ffffff;
border:1px solid #ddd;
}
::-webkit-scrollbar-thumb {
background-color:tomato;
}
To make that skinny track with a larger thumb like on my blog, you’ll need to play around with borders to give the illustion of that happening, because you can’t actually change the width of the track. By making thick borders that are the same color as your back ground, you make the track appear smaller.
this isn’t exactly the one I use for my blog, but it creates a similar look to this
While you can’t do this with the default window’s scroller, if you’re making a contained theme, you can add gradients and images to your thumb and track for even more customization possibilities.
The Scroller WordPress Plugin is a beautiful scrollbar for any scrollable element or a whole WordPress page. The Scroller is explicitly designed to customize the scrollbar on your WordPress site. This WordPress plugin turns an ordinary annoying browser scrollbar into a lovely stylized scrolling control.
How to Add Custom Scrollbar to Any Element in WordPress
How to Add Custom Scrollbar to Any Element in WordPress
Do you have a long sidebar that is breaking your WordPress layout on certain pages? Recently one of our users asked us for a solution. Since the user didn’t want to remove any of the widgets, we suggested adding a fixed height and scroll bar to to all long widgets which fixed the problem. In this article, we will show you how to add a custom scrollbar to any element in WordPress. Video Tutorial…
Scrollr Custom Scrollbar for Adobe Muse (Muse Widgets)
Scrollr Custom Scrollbar for Adobe Muse (Muse Widgets)
Purchase $12.00 Scrollr – Adobe Muse Widget. Looking for custom scrollbars which can be matched to the theme of your website. If so, then Scrollr is here for you. Scrollr has tons of options which any other custom scrollbar widget doesn’t have. Scrollr is also very easy to setup and customize. There’s many things you can do with it. Scrollr is a Web-kit based widget to change the scrollbar of a…
New Post has been published on http://www.htmluse.com/slick-custom-scrollbar/
Slick Custom Scrollbar
Download Demo
There are plenty of situations where the default scrollbar of the browser doesn’t quite cut it in terms of style or footprint. Well, Slick Custom Scrollbar lets you replace the default browser scrollbar on long content with a custom one instead, styled using pure CSS. The markup for the custom scrollbar is dynamically generated, leaving the original source untouched. Easily modify the look of the scrollbar using all the power afforded to you by CSS, whether it’s giving it a background image, rounded corners, CSS3 shadows, or changing its thickness etc.
Slick Custom Scrollbar Slick Custom Scrollbar lets you replace the default browser scrollbar on long content with a custom one instead, styled using pure CSS.
