{"id":235,"date":"2016-05-25T07:16:39","date_gmt":"2016-05-25T07:16:39","guid":{"rendered":"http:\/\/muthu.co\/?p=235"},"modified":"2021-01-02T14:05:50","modified_gmt":"2021-01-02T14:05:50","slug":"styling-the-default-browser-scroll-bar-using-css","status":"publish","type":"post","link":"http:\/\/write.muthu.co\/styling-the-default-browser-scroll-bar-using-css\/","title":{"rendered":"Styling the default browser scroll bar using CSS"},"content":{"rendered":"<p style=\"text-align: center;\">Default\u00a0Scroll Bar<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/muthu.co\/wp-content\/uploads\/2016\/05\/Screenshot-from-2016-05-25-12-30-49.png\" rel=\"attachment wp-att-238\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-238\" src=\"https:\/\/muthu.co\/wp-content\/uploads\/2016\/05\/Screenshot-from-2016-05-25-12-30-49.png\" alt=\"Default Scroll Bar\" width=\"387\" height=\"487\" srcset=\"http:\/\/write.muthu.co\/wp-content\/uploads\/2016\/05\/Screenshot-from-2016-05-25-12-30-49.png 387w, http:\/\/write.muthu.co\/wp-content\/uploads\/2016\/05\/Screenshot-from-2016-05-25-12-30-49-238x300.png 238w\" sizes=\"(max-width: 387px) 100vw, 387px\" \/><\/a><\/p>\n<p style=\"text-align: center;\">Add the below CSS code\u00a0to your stylesheet<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">::-webkit-scrollbar {\r\n    width: 4px;\r\n}\r\n\r\n::-webkit-scrollbar-track {\r\n    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); \r\n}\r\n\r\n::-webkit-scrollbar-thumb {\r\n    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); \r\n}<\/pre>\n<p style=\"text-align: center;\">This is what you get, a more beautiful Scroll Bar<\/p>\n<p><a href=\"https:\/\/muthu.co\/wp-content\/uploads\/2016\/05\/Screenshot-from-2016-05-25-12-29-51.png\" rel=\"attachment wp-att-236\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-236\" src=\"https:\/\/muthu.co\/wp-content\/uploads\/2016\/05\/Screenshot-from-2016-05-25-12-29-51.png\" alt=\"Default Scroll bar\" width=\"395\" height=\"488\" srcset=\"http:\/\/write.muthu.co\/wp-content\/uploads\/2016\/05\/Screenshot-from-2016-05-25-12-29-51.png 395w, http:\/\/write.muthu.co\/wp-content\/uploads\/2016\/05\/Screenshot-from-2016-05-25-12-29-51-243x300.png 243w\" sizes=\"(max-width: 395px) 100vw, 395px\" \/><\/a><\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\">Lets add some round corners and increase the width<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">::-webkit-scrollbar {\r\n    width: 6px;\r\n}\r\n\r\n::-webkit-scrollbar-thumb {\r\n    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);\r\n    -webkit-border-radius: 10px;\r\n    border-radius: 10px;\r\n}\r\n\r\n::-webkit-scrollbar-track {\r\n    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);\r\n    -webkit-border-radius: 10px;\r\n    border-radius: 10px;\r\n}<\/pre>\n<p style=\"text-align: center;\">\u00a0This is what we\u00a0get<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/muthu.co\/wp-content\/uploads\/2016\/05\/Screenshot-from-2016-05-25-12-37-34.png\" rel=\"attachment wp-att-239\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-239\" src=\"https:\/\/muthu.co\/wp-content\/uploads\/2016\/05\/Screenshot-from-2016-05-25-12-37-34.png\" alt=\"Scroll bar with round corners\" width=\"382\" height=\"488\" srcset=\"http:\/\/write.muthu.co\/wp-content\/uploads\/2016\/05\/Screenshot-from-2016-05-25-12-37-34.png 382w, http:\/\/write.muthu.co\/wp-content\/uploads\/2016\/05\/Screenshot-from-2016-05-25-12-37-34-235x300.png 235w\" sizes=\"(max-width: 382px) 100vw, 382px\" \/><\/a><\/p>\n<hr \/>\n<p style=\"text-align: center;\">\n<p style=\"text-align: center;\">Lets try to make a Mac like scroll bar<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">::-webkit-scrollbar {\r\n width: 10px; \r\n background-color: rgba(0,0,0,0);\r\n -webkit-border-radius: 100px;\r\n}\r\n\r\n::-webkit-scrollbar:hover {\r\n background-color: rgba(0, 0, 0, 0.09);\r\n}\r\n \r\n::-webkit-scrollbar-thumb:vertical {\r\n background: rgba(0,0,0,0.5);\r\n -webkit-border-radius: 100px;\r\n background-clip: padding-box;\r\n border: 2px solid rgba(0, 0, 0, 0);\r\n min-height: 10px;\r\n}\r\n\r\n::-webkit-scrollbar-thumb:vertical:active {\r\n background: rgba(0,0,0,0.61); \r\n -webkit-border-radius: 100px;\r\n}\r\n\r\n<\/pre>\n<p style=\"text-align: center;\">And here it is!<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/muthu.co\/wp-content\/uploads\/2016\/05\/Screenshot-from-2016-05-25-12-44-53.png\" rel=\"attachment wp-att-240\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-240\" src=\"https:\/\/muthu.co\/wp-content\/uploads\/2016\/05\/Screenshot-from-2016-05-25-12-44-53.png\" alt=\"Mac like scroll bar\" width=\"394\" height=\"498\" srcset=\"http:\/\/write.muthu.co\/wp-content\/uploads\/2016\/05\/Screenshot-from-2016-05-25-12-44-53.png 394w, http:\/\/write.muthu.co\/wp-content\/uploads\/2016\/05\/Screenshot-from-2016-05-25-12-44-53-237x300.png 237w\" sizes=\"(max-width: 394px) 100vw, 394px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Default\u00a0Scroll Bar Add the below CSS code\u00a0to your stylesheet ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); } ::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } This is what you get, a more beautiful Scroll Bar &nbsp; Lets add some round corners and increase the width ::-webkit-scrollbar { width: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[48],"_links":{"self":[{"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/posts\/235"}],"collection":[{"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/comments?post=235"}],"version-history":[{"count":1,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/posts\/235\/revisions"}],"predecessor-version":[{"id":1648,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/posts\/235\/revisions\/1648"}],"wp:attachment":[{"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/media?parent=235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/categories?post=235"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/tags?post=235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}