{"id":27916,"date":"2021-08-07T15:00:22","date_gmt":"2021-08-07T13:00:22","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=27916"},"modified":"2021-08-11T11:43:01","modified_gmt":"2021-08-11T09:43:01","slug":"how-to-add-custom-scrollbar-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-add-custom-scrollbar-in-wordpress\/","title":{"rendered":"How to Add a Custom Scrollbar in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]If there\u2019s one word you would associate with WordPress, it would be \u201ccustomizability.\u201d That\u2019s what all the core features, plugins, and themes are for \u2013 to mold the appearance and behavior of your website and make it fit your desires and needs. That\u2019s why you get to do awesome things like <a href=\"https:\/\/qodeinteractive.com\/magazine\/customize-wordpress-website-colors\/\">customize website colors<\/a>, add different elements like <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-pricing-list-in-wordpress\/\">pricing lists<\/a>, and just generally use the things you need to make the website look and play the part you have in your mind for it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]There are, of course, some customizable elements people tend to overlook. The scrollbar, that bar in your browser that moves as you scroll a page and lets you navigate through long pages faster, is one of them. If you want the people visiting your website to be treated to a scrollbar that at least matches the color-scheme of your website, you can make it happen.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we\u2019ll show you:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#options-for-adding-custom-scrollbar\">What Are Your Options for Adding a Custom Scrollbar in WordPress?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#add-custom-scrollbar-using-plugin\">How to Add a Custom Scrollbar in WordPress Using a Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#customize-scrollbar-using-css\">How to Customize the Scrollbar Using CSS<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"options-for-adding-custom-scrollbar\"><\/a>What Are Your Options for Adding a Custom Scrollbar in WordPress?<\/h2>\n<p>[\/vc_column_text][vc_column_text]If you\u2019re thinking about adding a custom scrollbar to your WordPress website, <strong>the two main options you\u2019ll have are to pick a plugin or to customize the scrollbar using CSS<\/strong>. Both of these options have their pros and cons that might influence your choice.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>If you use the plugin to add a custom scrollbar, you\u2019ll create a lasting change \u2013 as long as the plugin is installed.<\/strong> It\u2019s as simple as installing a plugin and playing around with the settings until you\u2019ve found what works best for you.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The downside of using the plugin is that it might slow down your website.<\/strong> Even if it\u2019s just milliseconds, these tend to add up when you use enough of these small and seemingly inconsequential plugins.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>You won\u2019t have speed issues when using CSS, however<\/strong>. You won\u2019t have to install anything \u2013 you\u2019ll be able to make all the changes through the appearance customer at <em><strong>Appearance &gt; Customize &gt; Additional CSS<\/strong><\/em>. The code isn\u2019t too hard to learn, either. The customizer will show you the changes in real-time, which is a neat bonus.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The problem with this method is, however, that you risk losing your customizations with a theme update.<\/strong> This is why it\u2019s generally recommended to <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-create-child-theme\/\">use a child theme<\/a> when making these types of changes.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"add-custom-scrollbar-using-plugin\"><\/a>How to Add a Custom Scrollbar in WordPress Using a Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]There are a couple of free plugins you can use to add a custom scrollbar to your WordPress website. We\u2019ll use the <a href=\"https:\/\/wordpress.org\/plugins\/scroll-styler\/\" target=\"_blank\" rel=\"noopener\">Scroll Styler<\/a> plugin, as it allows you to set up to four colors on your scrollbar. Head over to <em><strong>Plugins &gt; Add New<\/strong><\/em>, search for \u201cscroll styler\u201d, and then go ahead and install and activate it on your website.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"486\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Scroll-Styler.jpg\" class=\"attachment-full size-full\" alt=\"Scroll Styler\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Scroll-Styler.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Scroll-Styler-300x150.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Scroll-Styler-768x385.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Scroll-Styler-620x311.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After installing the plugin, head over to <em><strong>Settings &gt; Scroll Styler<\/strong><\/em> to access the plugin options. The topmost two are scrollbar width and scrollbar track padding. <strong>The first of the two will change how wide your scrollbar is, in pixels. The second one will change the padding around the scrollbar thumb.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"544\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Scroll-Styler-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Scroll Styler Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Scroll-Styler-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Scroll-Styler-Settings-300x168.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Scroll-Styler-Settings-768x431.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Scroll-Styler-Settings-620x348.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>The next four options will let you set the different colors for the scrollbar.<\/strong> Scrollbar track background color is the color of the scrollbar track, and it doesn\u2019t change. The color of the thumb does, however. \u201cBackground color\u201d is the thumb\u2019s color when it\u2019s not active. When you hover over the thumb with the cursor, it will change its color to \u201chover background color.\u201d When you press the thumb to scroll the page, it will change its color to \u201cactive background color.\u201d[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"588\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Scroll-Styler-Settings-2.jpg\" class=\"attachment-full size-full\" alt=\"Scroll Styler Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Scroll-Styler-Settings-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Scroll-Styler-Settings-2-300x182.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Scroll-Styler-Settings-2-768x466.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Scroll-Styler-Settings-2-620x376.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The final option allows you to set the scrollbar thumb border radius. <strong>Effectively, this lets you round off the corners of the thumb.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"588\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Save-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Save Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Save-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Save-Settings-300x182.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Save-Settings-768x466.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Save-Settings-620x376.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you\u2019ve chosen the options, don\u2019t forget to save the settings and you\u2019ll see the change on your website.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"506\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Scroll-Styler-Scroll-Bar-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Scroll Styler Scroll Bar Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Scroll-Styler-Scroll-Bar-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Scroll-Styler-Scroll-Bar-Preview-300x157.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Scroll-Styler-Scroll-Bar-Preview-768x401.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Scroll-Styler-Scroll-Bar-Preview-620x324.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]While the range of options offered by the plugin might be a bit modest, it can be more than enough to create a scrollbar that fits your website\u2019s color scheme.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"customize-scrollbar-using-css\"><\/a>How to Customize the Scrollbar Using CSS<\/h2>\n<p>[\/vc_column_text][vc_column_text]Your second option would be to use custom CSS to change the way the scrollbar looks. As we mentioned before, you\u2019ll need to navigate to <em><strong>Appearance &gt; Customize &gt; Additional CSS<\/strong><\/em> to make any changes.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The way to use custom CSS to change the scrollbar is by using pseudo-elements to customize certain parts of the scrollbar. You can customize:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>The scrollbar<\/strong> \u2013 :: -webkit-scrollbar<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>The scrollbar buttons<\/strong> \u2013 :: -webkit-scrollbar-button<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>The scrolling handle you can drag<\/strong> \u2013 :: -webkit-scrollbar-thumb<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>The track of the scrollbar<\/strong> \u2013 :: -webkit-scrollbar-track<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>The track that\u2019s not covered by the handle<\/strong> \u2013 :: -webkit-scrollbar-track-piece<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]So when you want to create a custom scrollbar, you can use these pseudo-elements like this:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">::-webkit-scrollbar {\r\nwidth: 15px;\r\n}\r\n::-webkit-scrollbar-track {\r\nbackground: #f6f6f4;\r\n}\r\n::-webkit-scrollbar-thumb {\r\nbackground: #86af49;\r\n} \r\n::-webkit-scrollbar-thumb:hover {\r\nBackground: #E5cdbc\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This will turn the default grey scrollbar into something that\u2019s a better match for this particular theme.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"506\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Scrollbar-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Scrollbar Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Scrollbar-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Scrollbar-Preview-300x157.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Scrollbar-Preview-768x401.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Scrollbar-Preview-620x324.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Remember that you can add shadows, change the radius of the elements, and do additional things to make your custom scrollbar truly special.<\/strong> You will need more advanced knowledge of CSS to take full advantage of this method of customizing the scrollbar. Then again, if you have enough time on your hands and are willing to learn through trial and error \u2013 you\u2019re bound to come up with some interesting combinations.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Let\u2019s Wrap It Up!<\/h2>\n<p>[\/vc_column_text][vc_column_text]The scrollbar \u2013 a useful element that\u2019s often overlooked when it comes to customizing the looks of your website. If this is a wrong you aim to right, you have two ways of doing it \u2013 either with a plugin or by adding some custom CSS. Each of the two has its pros and cons, so checking which browsers your audience uses the most might be prudent before making the choice. After that, it\u2019s just tinkering with the options or the code until you get satisfactory results.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Looking to add a custom scrollbar in WordPress? Scrollbars often don&#8217;t match a website&#8217;s theme, but don&#8217;t worry &#8211; we&#8217;ll show you how to change it!<\/p>\n","protected":false},"author":9295,"featured_media":27962,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[4,13],"class_list":["post-27916","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/27916","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/9295"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=27916"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/27916\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/27962"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=27916"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=27916"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=27916"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}