{"id":22739,"date":"2017-06-08T13:30:30","date_gmt":"2017-06-08T13:30:30","guid":{"rendered":"https:\/\/getflywheel.com\/?p=22739"},"modified":"2024-06-25T19:16:48","modified_gmt":"2024-06-26T00:16:48","slug":"custom-scrollbar-wordpress-jquery","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/resources\/custom-scrollbar-wordpress-jquery\/","title":{"rendered":"How to Add a Custom Scrollbar to WordPress with jQuery"},"content":{"rendered":"\n<p>The scrollbar is arguably the most neglected browser element when it comes to design. Pretty much all browsers and operating systems display it differently. Some detail-oriented clients and designers may have noticed the inconsistent look and feel of the scrollbar across these different touch points.<\/p>\n\n\n\n<p>If you are one of these people, today is your lucky day \u2013 I&#8217;m going to show you how to create a custom scrollbar in a few easy steps, then we\u2019ll overwrite the default browser scrollbar and achieve a consistent look and feel across all browsers and operating systems!<\/p>\n\n\n\n<p>As you may already know, CSS does not offer a universal way to directly target the scrollbar, so the only viable option is JavaScript \u2013jQuery, to be precise. Some Webkit-based browsers (Chrome, Safari, the default Android browser, etc.), offer proprietary CSS vendor-prefixed ways to achieve this, but what we want is a silver bullet \u2013 a solution that will work across all browsers and operating systems.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2017\/06\/custom-scrollbar-wordpress-jquery-devices.jpg\" alt=\"custom-scrollbar-wordpress-jquery-devices\" class=\"wp-image-22871\"\/><\/figure>\n\n\n\n<p>In this tutorial, we are going to use a jQuery plugin called the <a href=\"https:\/\/github.com\/malihu\/malihu-custom-scrollbar-plugin\" target=\"_blank\" rel=\"noopener noreferrer\">Malihu Custom Scrollbar<\/a>. The number of JavaScript plugin options out there that can achieve a custom scrollbar is quite staggering, but I settled on this particular one for the following seven reasons:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>It supports the body element. Most plugins do not offer a way to target the browser window, but this one does.<\/li><li>It works on both vertical and horizontal scrollbars.<\/li><li>It has mouse-wheel, keyboard, and touch support.<\/li><li>It is highly customizable via CSS.<\/li><li>It has right-to-left (RTL) direction support.<\/li><li>It has comprehensive documentation.<\/li><li>It has cross browser compatibility.<\/li><\/ul>\n\n\n\n<p>One thing to note is that for this plugin (or any other jQuery plugins to work), your WordPress theme must already have the jQuery library installed.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2017\/06\/custom-scrollbar-wordpress-jquery-work.jpg\" alt=\"custom-scrollbar-wordpress-jquery-work\" class=\"wp-image-22873\"\/><\/figure>\n\n\n\n<p>Let&#8217;s get down to work.<\/p>\n\n\n\n<p>1. Head over to github and download <a href=\"https:\/\/github.com\/malihu\/malihu-custom-scrollbar-plugin\" target=\"_blank\" rel=\"noopener noreferrer\">the latest plugin package<\/a>.<\/p>\n\n\n\n<p>2. Unzip the package.<\/p>\n\n\n\n<p>3. Copy over <code>jquery.mCustomScrollbar.js<\/code> into your theme&#8217;s JavaScript folder.<\/p>\n\n\n\n<p>4. Copy over <code>jquery.mCustomScrollbar.css<\/code> into your theme&#8217;s CSS folder.<\/p>\n\n\n\n<p>5. Copy over <code>mCSB_buttons.png<\/code> into your theme&#8217;s images folder.<\/p>\n\n\n\n<p>6. Open <code>jquery.mCustomScrollbar.css<\/code>, search for &#8220;mCSB_buttons.png.&#8221; Change the line <code>background-image: url(mCSB_buttons.png);<\/code> to <code>background-image: url(images\/mCSB_buttons.png);<\/code>.<\/p>\n\n\n\n<p>7. Open <code>functions.php<\/code> in your preferred code editor. Search for &nbsp;<code>wp_enqueue_script<\/code>. You will likely see multiple instances, as <code>wp_enqueue_script<\/code> is the official and standard way of adding scripts to WordPress.<\/p>\n\n\n\n<p>8. Just after the last instance of <code>wp_enqueue_script<\/code>, add the following snippet and save.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>wp_enqueue_script( 'my-custom-scrollbar', get_template_directory_uri() . '\/js\/jquery.mCustomScrollbar.js', array(), '20170323', true );<\/code><\/pre>\n\n\n\n<p>9. While still in <code>functions.php<\/code>, search for <code>wp_enqueue_style<\/code> and just after this line add the following snippet:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>wp_enqueue_style('my-custom-scrollbar-style', get_template_directory_uri() .'\/css\/jquery.mCustomScrollbar.css' );<\/code><\/pre>\n\n\n\n<p>10. Open <code>footer.php<\/code> and search for <code>&lt;?php wp_footer(); ?><\/code>. Just after this line, add the following snippet:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&amp;amp;amp;amp;amp;amp;lt;script&amp;amp;amp;amp;amp;amp;gt;\njQuery(\"body\").mCustomScrollbar({\n                    axis:\"y\",\n                });\n&amp;amp;amp;amp;amp;amp;lt;\/script&amp;amp;amp;amp;amp;amp;gt;<\/code><\/pre>\n\n\n\n<p>Note: You should replace &#8220;body&#8221; in the code snippet above with your chosen selector. In this case, I wanted to customize the default browser window scrollbar. Let\u2019s say you wanted to customize an element with the class <code>.MyClass<\/code>. The snippet would change to:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&amp;amp;amp;amp;amp;amp;lt;script&amp;amp;amp;amp;amp;amp;gt;\njQuery(\".MyClass\").mCustomScrollbar({\n                    axis:\"y\",\n                });\n&amp;amp;amp;amp;amp;amp;lt;\/script&amp;amp;amp;amp;amp;amp;gt;<\/code><\/pre>\n\n\n\n<p>I hope that in the future there will be a standard, straightforward, and non-JavaScript way to customize the default browser scrollbar. In the meantime, jQuery is an easy-enough way to do it.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The scrollbar is arguably the most neglected browser element when it comes to design. Pretty much all browsers and operating systems display it differently. Some detail-oriented clients and designers may have noticed the inconsistent look and feel of the scrollbar across these different touch points. If you are one of these people, today is your<span class=\"tile__ellipses\">&hellip;<\/span><span class=\"tile__ellipses--animated\"><\/span><\/p>\n","protected":false},"author":297,"featured_media":47777,"template":"","resource-topic":[],"resource-role":[],"resource-type":[916],"class_list":["post-22739","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Add a Custom Scrollbar to WordPress with jQuery | WP Engine<\/title>\n<meta name=\"description\" content=\"Read our guide on creating custom scrollbars in WordPress using jQuery to improve the visual appeal and user experience of your website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wpengine.com\/resources\/custom-scrollbar-wordpress-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add a Custom Scrollbar to WordPress with jQuery | WP Engine\" \/>\n<meta property=\"og:description\" content=\"Read our guide on creating custom scrollbars in WordPress using jQuery to improve the visual appeal and user experience of your website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/resources\/custom-scrollbar-wordpress-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-26T00:16:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/resources\/wp-content\/uploads\/2024\/05\/WPE-IMG-Thumbnail-1200x630-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/resources\/custom-scrollbar-wordpress-jquery\/\",\"url\":\"https:\/\/wpengine.com\/resources\/custom-scrollbar-wordpress-jquery\/\",\"name\":\"How to Add a Custom Scrollbar to WordPress with jQuery | WP Engine\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/resources\/#website\"},\"datePublished\":\"2017-06-08T13:30:30+00:00\",\"dateModified\":\"2024-06-26T00:16:48+00:00\",\"description\":\"Read our guide on creating custom scrollbars in WordPress using jQuery to improve the visual appeal and user experience of your website.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/resources\/custom-scrollbar-wordpress-jquery\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/resources\/custom-scrollbar-wordpress-jquery\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/resources\/custom-scrollbar-wordpress-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/resources\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Add a Custom Scrollbar to WordPress with jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/resources\/#website\",\"url\":\"https:\/\/wpengine.com\/resources\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/resources\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/resources\/#\/schema\/person\/3a22232b01de39dcf588fb8e421c0521\",\"name\":\"Erin Myers\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/resources\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cd881e115bc28c81642ec61752db9981ece9ee8b4c81498a9b6276b9cdcaf5e6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cd881e115bc28c81642ec61752db9981ece9ee8b4c81498a9b6276b9cdcaf5e6?s=96&d=mm&r=g\",\"caption\":\"Erin Myers\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add a Custom Scrollbar to WordPress with jQuery | WP Engine","description":"Read our guide on creating custom scrollbars in WordPress using jQuery to improve the visual appeal and user experience of your website.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wpengine.com\/resources\/custom-scrollbar-wordpress-jquery\/","og_locale":"en_US","og_type":"article","og_title":"How to Add a Custom Scrollbar to WordPress with jQuery | WP Engine","og_description":"Read our guide on creating custom scrollbars in WordPress using jQuery to improve the visual appeal and user experience of your website.","og_url":"https:\/\/wpengine.com\/resources\/custom-scrollbar-wordpress-jquery\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2024-06-26T00:16:48+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/wpengine.com\/resources\/wp-content\/uploads\/2024\/05\/WPE-IMG-Thumbnail-1200x630-1.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/resources\/custom-scrollbar-wordpress-jquery\/","url":"https:\/\/wpengine.com\/resources\/custom-scrollbar-wordpress-jquery\/","name":"How to Add a Custom Scrollbar to WordPress with jQuery | WP Engine","isPartOf":{"@id":"https:\/\/wpengine.com\/resources\/#website"},"datePublished":"2017-06-08T13:30:30+00:00","dateModified":"2024-06-26T00:16:48+00:00","description":"Read our guide on creating custom scrollbars in WordPress using jQuery to improve the visual appeal and user experience of your website.","breadcrumb":{"@id":"https:\/\/wpengine.com\/resources\/custom-scrollbar-wordpress-jquery\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/resources\/custom-scrollbar-wordpress-jquery\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/resources\/custom-scrollbar-wordpress-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/resources\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/resources\/"},{"@type":"ListItem","position":3,"name":"How to Add a Custom Scrollbar to WordPress with jQuery"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/resources\/#website","url":"https:\/\/wpengine.com\/resources\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/resources\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/resources\/#\/schema\/person\/3a22232b01de39dcf588fb8e421c0521","name":"Erin Myers","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/resources\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cd881e115bc28c81642ec61752db9981ece9ee8b4c81498a9b6276b9cdcaf5e6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cd881e115bc28c81642ec61752db9981ece9ee8b4c81498a9b6276b9cdcaf5e6?s=96&d=mm&r=g","caption":"Erin Myers"}}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/resources\/wp-content\/themes\/wpengine-breakthrough\/images\/fallback\/default-grid-resource.jpg","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":false,"topic":false,"_links":{"self":[{"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/resource\/22739","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/users\/297"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/resources\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/media?parent=22739"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/resource-topic?post=22739"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/resource-role?post=22739"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/resource-type?post=22739"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}