Custom Scrollbar Style 1:<\/h2>\n::-webkit-scrollbar {\r\n width<\/span>:<\/span> 12px<\/span><\/span>;\r\n}\r\n::-webkit-scrollbar-track {\r\n -webkit-box-shadow<\/span>:<\/span> inset<\/span> 0<\/span> 0<\/span> 6px<\/span><\/span> rgba<\/span>(0,0,0,0.3<\/span>); \r\n border-radius<\/span>:<\/span> 10px<\/span><\/span>;\r\n}\r\n::-webkit-scrollbar-thumb {\r\n border-radius<\/span>:<\/span> 10px<\/span><\/span>;\r\n -webkit-box-shadow<\/span>:<\/span> inset<\/span> 0<\/span> 0<\/span> 6px<\/span><\/span> rgba<\/span>(0,0,0,0.5<\/span>);\r\n}\r\n<\/pre>\n![\"custom-scrollbar-css-webkit-style-1-codexworld\"](\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/02\/custom-scrollbar-css-webkit-style-1-codexworld.png\")
<\/div>\nCustom Scrollbar Style 2:<\/h2>\n::-webkit-scrollbar {\r\n width<\/span>:<\/span> 12px<\/span><\/span>;\r\n}\r\n::-webkit-scrollbar-track {\r\n -webkit-box-shadow<\/span>:<\/span> inset<\/span> 0<\/span> 0<\/span> 6px<\/span><\/span> rgba<\/span>(0,0,0,0.3<\/span>); \r\n border-radius<\/span>:<\/span> 10px<\/span><\/span>;\r\n}\r\n::-webkit-scrollbar-thumb {\r\n border-radius<\/span>:<\/span> 10px<\/span><\/span>;\r\n -webkit-box-shadow<\/span>:<\/span> inset<\/span> 0<\/span> 0<\/span> 6px<\/span><\/span> rgba<\/span>(0,0,0,0.5<\/span>);\r\n}\r\n<\/pre>\n![\"custom-scrollbar-css-webkit-style-2-codexworld\"](\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/02\/custom-scrollbar-css-webkit-style-2-codexworld.png\")
<\/div>\nCustom Scrollbar Style 3:<\/h2>\n::-webkit-scrollbar{\r\n width<\/span>:<\/span> 12px<\/span><\/span>;\r\n background-color<\/span>:<\/span> #F5F5F5<\/span>;\r\n}\r\n::-webkit-scrollbar-track{\r\n -webkit-box-shadow<\/span>:<\/span> inset<\/span> 0<\/span> 0<\/span> 6px<\/span><\/span> rgba<\/span>(0,0,0,0.3<\/span>);\r\n background-color<\/span>:<\/span> #F5F5F5<\/span>;\r\n}\r\n::-webkit-scrollbar-thumb{\r\n background-color<\/span>:<\/span> #F90<\/span>; \r\n background-image<\/span>:<\/span> -webkit-linear-gradient(90deg<\/span><\/span>,rgba<\/span>(255, 255, 255, .2<\/span>) 25%<\/span><\/span>,transparent<\/span> 25%<\/span><\/span>,transparent<\/span> 50%<\/span><\/span>,rgba<\/span>(255, 255, 255, .2<\/span>) 50%<\/span><\/span>,rgba<\/span>(255, 255, 255, .2<\/span>) 75%<\/span><\/span>,transparent<\/span> 75%<\/span><\/span>,transparent<\/span>)\r\n}\r\n<\/pre>\n![\"\"](\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/02\/css-custom-scrollbar-in-div-webkit-style-3-codexworld.png\")
<\/div>\nCustom Scrollbar in Div<\/h2>\n
You can create custom scrollbar for div content with Webkit. The element class or id need to be specified in webkit-scrollbar, webkit-scrollbar-track, and webkit-scrollbar-thumb. The following code snippets makes custom scrollbar for a specific div using CSS.
\nHTML Code:<\/b><\/p>\n<div<\/span> class<\/span>=\"content\"<\/span>>\r\n <!-- div content goes here --><\/span>\r\n<\/div<\/span>>\r\n<\/pre>\nCSS Code:<\/b><\/p>\n.content<\/span>::-webkit-scrollbar {\r\n width<\/span>:<\/span> 12px<\/span><\/span>;\r\n}\r\n.content<\/span>::-webkit-scrollbar-track {\r\n -webkit-box-shadow<\/span>:<\/span> inset<\/span> 0<\/span> 0<\/span> 6px<\/span><\/span> rgba<\/span>(0,0,0,0.3<\/span>); \r\n border-radius<\/span>:<\/span> 10px<\/span><\/span>;\r\n}\r\n.content<\/span>::-webkit-scrollbar-thumb {\r\n border-radius<\/span>:<\/span> 10px<\/span><\/span>;\r\n -webkit-box-shadow<\/span>:<\/span> inset<\/span> 0<\/span> 0<\/span> 6px<\/span><\/span> rgba<\/span>(0,0,0,0.5<\/span>);\r\n}\r\n<\/pre>\nScrollbar Selectors (Pseudo Elements)<\/h2>\n
The following pseudo elements are available for customizing the browser’s scrollbar.<\/p>\n
\n::-webkit-scrollbar<\/code> – Select the scrollbar.<\/li>\n::-webkit-scrollbar-button<\/code> – Select the buttons on the scrollbar.<\/li>\n::-webkit-scrollbar-thumb<\/code> – Select the draggable scrolling handle.<\/li>\n::-webkit-scrollbar-track<\/code> – Select the progress bar of the scrollbar.<\/li>\n::-webkit-scrollbar-track-piece<\/code> – Select the progress bar without handle.<\/li>\n::-webkit-scrollbar-corner<\/code> – Select the bottom corner of the scrollbar.<\/li>\n::-webkit-resizer<\/code> – Select the draggable resizing handle.<\/li>\n<\/ul>\nConclusion<\/h2>\n
In our example code snippet, only some basic styles are provided for the custom scrollbar. You can change the custom scrollbars style based on your web page UI. To customize the scrollbar, specify the CSS with ::-webkit-scrollbar<\/b>, ::-webkit-scrollbar-track<\/b>, and ::-webkit-scrollbar-thumb<\/b> pseudo elements.<\/p>\n","protected":false},"excerpt":{"rendered":"
The web page UI design with custom scrollbar adds an extra value to your website. Custom scrollbars make the website feel and look different. The browser’s scrollbar can be customized using CSS. Using CSS pseudo-element, <\/p>\n","protected":false},"author":1,"featured_media":2173,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[130],"tags":[124,258,259],"class_list":["post-2172","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css","tag-css","tag-scrollbar","tag-webkit","cat-130-id","has_thumb"],"yoast_head":"\n
Custom Scrollbars with CSS and Webkit - CodexWorld<\/title>\n<meta name=\"description\" content=\"Custom scrollbars in Webkit - CSS code snippet to change default scrollbar style with pseudo-element in Webkit. Customize the scrollbars with web page UI design.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Custom Scrollbars with CSS and Webkit - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Custom scrollbars in Webkit - CSS code snippet to change default scrollbar style with pseudo-element in Webkit. Customize the scrollbars with web page UI design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-23T16:43:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-05-30T04:45:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/02\/custom-scrollbars-style-css-webkit-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Custom Scrollbars with CSS and Webkit\",\"datePublished\":\"2017-02-23T16:43:25+00:00\",\"dateModified\":\"2018-05-30T04:45:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/\"},\"wordCount\":314,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/02\\\/custom-scrollbars-style-css-webkit-codexworld.png\",\"keywords\":[\"CSS\",\"Scrollbar\",\"Webkit\"],\"articleSection\":[\"HTML&CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/\",\"name\":\"Custom Scrollbars with CSS and Webkit - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/02\\\/custom-scrollbars-style-css-webkit-codexworld.png\",\"datePublished\":\"2017-02-23T16:43:25+00:00\",\"dateModified\":\"2018-05-30T04:45:30+00:00\",\"description\":\"Custom scrollbars in Webkit - CSS code snippet to change default scrollbar style with pseudo-element in Webkit. Customize the scrollbars with web page UI design.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/02\\\/custom-scrollbars-style-css-webkit-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/02\\\/custom-scrollbars-style-css-webkit-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"custom-scrollbars-style-css-webkit-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Custom Scrollbars with CSS and Webkit\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web & Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Custom Scrollbars with CSS and Webkit - CodexWorld","description":"Custom scrollbars in Webkit - CSS code snippet to change default scrollbar style with pseudo-element in Webkit. Customize the scrollbars with web page UI design.","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:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/","og_locale":"en_US","og_type":"article","og_title":"Custom Scrollbars with CSS and Webkit - CodexWorld","og_description":"Custom scrollbars in Webkit - CSS code snippet to change default scrollbar style with pseudo-element in Webkit. Customize the scrollbars with web page UI design.","og_url":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2017-02-23T16:43:25+00:00","article_modified_time":"2018-05-30T04:45:30+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/02\/custom-scrollbars-style-css-webkit-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Custom Scrollbars with CSS and Webkit","datePublished":"2017-02-23T16:43:25+00:00","dateModified":"2018-05-30T04:45:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/"},"wordCount":314,"commentCount":1,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/02\/custom-scrollbars-style-css-webkit-codexworld.png","keywords":["CSS","Scrollbar","Webkit"],"articleSection":["HTML&CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/","url":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/","name":"Custom Scrollbars with CSS and Webkit - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/02\/custom-scrollbars-style-css-webkit-codexworld.png","datePublished":"2017-02-23T16:43:25+00:00","dateModified":"2018-05-30T04:45:30+00:00","description":"Custom scrollbars in Webkit - CSS code snippet to change default scrollbar style with pseudo-element in Webkit. Customize the scrollbars with web page UI design.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/02\/custom-scrollbars-style-css-webkit-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/02\/custom-scrollbars-style-css-webkit-codexworld.png","width":1366,"height":768,"caption":"custom-scrollbars-style-css-webkit-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Custom Scrollbars with CSS and Webkit"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web & Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/02\/custom-scrollbars-style-css-webkit-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-z2","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2172","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=2172"}],"version-history":[{"count":5,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2172\/revisions"}],"predecessor-version":[{"id":3298,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2172\/revisions\/3298"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/2173"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=2172"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=2172"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=2172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/div>\nCustom Scrollbar Style 2:<\/h2>\n::-webkit-scrollbar {\r\n width<\/span>:<\/span> 12px<\/span><\/span>;\r\n}\r\n::-webkit-scrollbar-track {\r\n -webkit-box-shadow<\/span>:<\/span> inset<\/span> 0<\/span> 0<\/span> 6px<\/span><\/span> rgba<\/span>(0,0,0,0.3<\/span>); \r\n border-radius<\/span>:<\/span> 10px<\/span><\/span>;\r\n}\r\n::-webkit-scrollbar-thumb {\r\n border-radius<\/span>:<\/span> 10px<\/span><\/span>;\r\n -webkit-box-shadow<\/span>:<\/span> inset<\/span> 0<\/span> 0<\/span> 6px<\/span><\/span> rgba<\/span>(0,0,0,0.5<\/span>);\r\n}\r\n<\/pre>\n<\/div>\nCustom Scrollbar Style 3:<\/h2>\n::-webkit-scrollbar{\r\n width<\/span>:<\/span> 12px<\/span><\/span>;\r\n background-color<\/span>:<\/span> #F5F5F5<\/span>;\r\n}\r\n::-webkit-scrollbar-track{\r\n -webkit-box-shadow<\/span>:<\/span> inset<\/span> 0<\/span> 0<\/span> 6px<\/span><\/span> rgba<\/span>(0,0,0,0.3<\/span>);\r\n background-color<\/span>:<\/span> #F5F5F5<\/span>;\r\n}\r\n::-webkit-scrollbar-thumb{\r\n background-color<\/span>:<\/span> #F90<\/span>; \r\n background-image<\/span>:<\/span> -webkit-linear-gradient(90deg<\/span><\/span>,rgba<\/span>(255, 255, 255, .2<\/span>) 25%<\/span><\/span>,transparent<\/span> 25%<\/span><\/span>,transparent<\/span> 50%<\/span><\/span>,rgba<\/span>(255, 255, 255, .2<\/span>) 50%<\/span><\/span>,rgba<\/span>(255, 255, 255, .2<\/span>) 75%<\/span><\/span>,transparent<\/span> 75%<\/span><\/span>,transparent<\/span>)\r\n}\r\n<\/pre>\n<\/div>\nCustom Scrollbar in Div<\/h2>\n
You can create custom scrollbar for div content with Webkit. The element class or id need to be specified in webkit-scrollbar, webkit-scrollbar-track, and webkit-scrollbar-thumb. The following code snippets makes custom scrollbar for a specific div using CSS.
\nHTML Code:<\/b><\/p>\n<div<\/span> class<\/span>=\"content\"<\/span>>\r\n <!-- div content goes here --><\/span>\r\n<\/div<\/span>>\r\n<\/pre>\nCSS Code:<\/b><\/p>\n.content<\/span>::-webkit-scrollbar {\r\n width<\/span>:<\/span> 12px<\/span><\/span>;\r\n}\r\n.content<\/span>::-webkit-scrollbar-track {\r\n -webkit-box-shadow<\/span>:<\/span> inset<\/span> 0<\/span> 0<\/span> 6px<\/span><\/span> rgba<\/span>(0,0,0,0.3<\/span>); \r\n border-radius<\/span>:<\/span> 10px<\/span><\/span>;\r\n}\r\n.content<\/span>::-webkit-scrollbar-thumb {\r\n border-radius<\/span>:<\/span> 10px<\/span><\/span>;\r\n -webkit-box-shadow<\/span>:<\/span> inset<\/span> 0<\/span> 0<\/span> 6px<\/span><\/span> rgba<\/span>(0,0,0,0.5<\/span>);\r\n}\r\n<\/pre>\nScrollbar Selectors (Pseudo Elements)<\/h2>\n
The following pseudo elements are available for customizing the browser’s scrollbar.<\/p>\n
\n::-webkit-scrollbar<\/code> – Select the scrollbar.<\/li>\n::-webkit-scrollbar-button<\/code> – Select the buttons on the scrollbar.<\/li>\n::-webkit-scrollbar-thumb<\/code> – Select the draggable scrolling handle.<\/li>\n::-webkit-scrollbar-track<\/code> – Select the progress bar of the scrollbar.<\/li>\n::-webkit-scrollbar-track-piece<\/code> – Select the progress bar without handle.<\/li>\n::-webkit-scrollbar-corner<\/code> – Select the bottom corner of the scrollbar.<\/li>\n::-webkit-resizer<\/code> – Select the draggable resizing handle.<\/li>\n<\/ul>\nConclusion<\/h2>\n
In our example code snippet, only some basic styles are provided for the custom scrollbar. You can change the custom scrollbars style based on your web page UI. To customize the scrollbar, specify the CSS with ::-webkit-scrollbar<\/b>, ::-webkit-scrollbar-track<\/b>, and ::-webkit-scrollbar-thumb<\/b> pseudo elements.<\/p>\n","protected":false},"excerpt":{"rendered":"
The web page UI design with custom scrollbar adds an extra value to your website. Custom scrollbars make the website feel and look different. The browser’s scrollbar can be customized using CSS. Using CSS pseudo-element, <\/p>\n","protected":false},"author":1,"featured_media":2173,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[130],"tags":[124,258,259],"class_list":["post-2172","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css","tag-css","tag-scrollbar","tag-webkit","cat-130-id","has_thumb"],"yoast_head":"\n
Custom Scrollbars with CSS and Webkit - CodexWorld<\/title>\n<meta name=\"description\" content=\"Custom scrollbars in Webkit - CSS code snippet to change default scrollbar style with pseudo-element in Webkit. Customize the scrollbars with web page UI design.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Custom Scrollbars with CSS and Webkit - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Custom scrollbars in Webkit - CSS code snippet to change default scrollbar style with pseudo-element in Webkit. Customize the scrollbars with web page UI design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-23T16:43:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-05-30T04:45:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/02\/custom-scrollbars-style-css-webkit-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Custom Scrollbars with CSS and Webkit\",\"datePublished\":\"2017-02-23T16:43:25+00:00\",\"dateModified\":\"2018-05-30T04:45:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/\"},\"wordCount\":314,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/02\\\/custom-scrollbars-style-css-webkit-codexworld.png\",\"keywords\":[\"CSS\",\"Scrollbar\",\"Webkit\"],\"articleSection\":[\"HTML&CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/\",\"name\":\"Custom Scrollbars with CSS and Webkit - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/02\\\/custom-scrollbars-style-css-webkit-codexworld.png\",\"datePublished\":\"2017-02-23T16:43:25+00:00\",\"dateModified\":\"2018-05-30T04:45:30+00:00\",\"description\":\"Custom scrollbars in Webkit - CSS code snippet to change default scrollbar style with pseudo-element in Webkit. Customize the scrollbars with web page UI design.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/02\\\/custom-scrollbars-style-css-webkit-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/02\\\/custom-scrollbars-style-css-webkit-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"custom-scrollbars-style-css-webkit-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Custom Scrollbars with CSS and Webkit\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web & Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Custom Scrollbars with CSS and Webkit - CodexWorld","description":"Custom scrollbars in Webkit - CSS code snippet to change default scrollbar style with pseudo-element in Webkit. Customize the scrollbars with web page UI design.","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:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/","og_locale":"en_US","og_type":"article","og_title":"Custom Scrollbars with CSS and Webkit - CodexWorld","og_description":"Custom scrollbars in Webkit - CSS code snippet to change default scrollbar style with pseudo-element in Webkit. Customize the scrollbars with web page UI design.","og_url":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2017-02-23T16:43:25+00:00","article_modified_time":"2018-05-30T04:45:30+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/02\/custom-scrollbars-style-css-webkit-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Custom Scrollbars with CSS and Webkit","datePublished":"2017-02-23T16:43:25+00:00","dateModified":"2018-05-30T04:45:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/"},"wordCount":314,"commentCount":1,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/02\/custom-scrollbars-style-css-webkit-codexworld.png","keywords":["CSS","Scrollbar","Webkit"],"articleSection":["HTML&CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/","url":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/","name":"Custom Scrollbars with CSS and Webkit - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/02\/custom-scrollbars-style-css-webkit-codexworld.png","datePublished":"2017-02-23T16:43:25+00:00","dateModified":"2018-05-30T04:45:30+00:00","description":"Custom scrollbars in Webkit - CSS code snippet to change default scrollbar style with pseudo-element in Webkit. Customize the scrollbars with web page UI design.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/02\/custom-scrollbars-style-css-webkit-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/02\/custom-scrollbars-style-css-webkit-codexworld.png","width":1366,"height":768,"caption":"custom-scrollbars-style-css-webkit-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Custom Scrollbars with CSS and Webkit"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web & Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/02\/custom-scrollbars-style-css-webkit-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-z2","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2172","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=2172"}],"version-history":[{"count":5,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2172\/revisions"}],"predecessor-version":[{"id":3298,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2172\/revisions\/3298"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/2173"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=2172"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=2172"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=2172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/div>\nCustom Scrollbar Style 3:<\/h2>\n::-webkit-scrollbar{\r\n width<\/span>:<\/span> 12px<\/span><\/span>;\r\n background-color<\/span>:<\/span> #F5F5F5<\/span>;\r\n}\r\n::-webkit-scrollbar-track{\r\n -webkit-box-shadow<\/span>:<\/span> inset<\/span> 0<\/span> 0<\/span> 6px<\/span><\/span> rgba<\/span>(0,0,0,0.3<\/span>);\r\n background-color<\/span>:<\/span> #F5F5F5<\/span>;\r\n}\r\n::-webkit-scrollbar-thumb{\r\n background-color<\/span>:<\/span> #F90<\/span>; \r\n background-image<\/span>:<\/span> -webkit-linear-gradient(90deg<\/span><\/span>,rgba<\/span>(255, 255, 255, .2<\/span>) 25%<\/span><\/span>,transparent<\/span> 25%<\/span><\/span>,transparent<\/span> 50%<\/span><\/span>,rgba<\/span>(255, 255, 255, .2<\/span>) 50%<\/span><\/span>,rgba<\/span>(255, 255, 255, .2<\/span>) 75%<\/span><\/span>,transparent<\/span> 75%<\/span><\/span>,transparent<\/span>)\r\n}\r\n<\/pre>\n<\/div>\nCustom Scrollbar in Div<\/h2>\n
You can create custom scrollbar for div content with Webkit. The element class or id need to be specified in webkit-scrollbar, webkit-scrollbar-track, and webkit-scrollbar-thumb. The following code snippets makes custom scrollbar for a specific div using CSS.
\nHTML Code:<\/b><\/p>\n<div<\/span> class<\/span>=\"content\"<\/span>>\r\n <!-- div content goes here --><\/span>\r\n<\/div<\/span>>\r\n<\/pre>\nCSS Code:<\/b><\/p>\n.content<\/span>::-webkit-scrollbar {\r\n width<\/span>:<\/span> 12px<\/span><\/span>;\r\n}\r\n.content<\/span>::-webkit-scrollbar-track {\r\n -webkit-box-shadow<\/span>:<\/span> inset<\/span> 0<\/span> 0<\/span> 6px<\/span><\/span> rgba<\/span>(0,0,0,0.3<\/span>); \r\n border-radius<\/span>:<\/span> 10px<\/span><\/span>;\r\n}\r\n.content<\/span>::-webkit-scrollbar-thumb {\r\n border-radius<\/span>:<\/span> 10px<\/span><\/span>;\r\n -webkit-box-shadow<\/span>:<\/span> inset<\/span> 0<\/span> 0<\/span> 6px<\/span><\/span> rgba<\/span>(0,0,0,0.5<\/span>);\r\n}\r\n<\/pre>\nScrollbar Selectors (Pseudo Elements)<\/h2>\n
The following pseudo elements are available for customizing the browser’s scrollbar.<\/p>\n
\n::-webkit-scrollbar<\/code> – Select the scrollbar.<\/li>\n::-webkit-scrollbar-button<\/code> – Select the buttons on the scrollbar.<\/li>\n::-webkit-scrollbar-thumb<\/code> – Select the draggable scrolling handle.<\/li>\n::-webkit-scrollbar-track<\/code> – Select the progress bar of the scrollbar.<\/li>\n::-webkit-scrollbar-track-piece<\/code> – Select the progress bar without handle.<\/li>\n::-webkit-scrollbar-corner<\/code> – Select the bottom corner of the scrollbar.<\/li>\n::-webkit-resizer<\/code> – Select the draggable resizing handle.<\/li>\n<\/ul>\nConclusion<\/h2>\n
In our example code snippet, only some basic styles are provided for the custom scrollbar. You can change the custom scrollbars style based on your web page UI. To customize the scrollbar, specify the CSS with ::-webkit-scrollbar<\/b>, ::-webkit-scrollbar-track<\/b>, and ::-webkit-scrollbar-thumb<\/b> pseudo elements.<\/p>\n","protected":false},"excerpt":{"rendered":"
The web page UI design with custom scrollbar adds an extra value to your website. Custom scrollbars make the website feel and look different. The browser’s scrollbar can be customized using CSS. Using CSS pseudo-element, <\/p>\n","protected":false},"author":1,"featured_media":2173,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[130],"tags":[124,258,259],"class_list":["post-2172","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css","tag-css","tag-scrollbar","tag-webkit","cat-130-id","has_thumb"],"yoast_head":"\n
Custom Scrollbars with CSS and Webkit - CodexWorld<\/title>\n<meta name=\"description\" content=\"Custom scrollbars in Webkit - CSS code snippet to change default scrollbar style with pseudo-element in Webkit. Customize the scrollbars with web page UI design.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Custom Scrollbars with CSS and Webkit - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Custom scrollbars in Webkit - CSS code snippet to change default scrollbar style with pseudo-element in Webkit. Customize the scrollbars with web page UI design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-23T16:43:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-05-30T04:45:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/02\/custom-scrollbars-style-css-webkit-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Custom Scrollbars with CSS and Webkit\",\"datePublished\":\"2017-02-23T16:43:25+00:00\",\"dateModified\":\"2018-05-30T04:45:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/\"},\"wordCount\":314,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/02\\\/custom-scrollbars-style-css-webkit-codexworld.png\",\"keywords\":[\"CSS\",\"Scrollbar\",\"Webkit\"],\"articleSection\":[\"HTML&CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/\",\"name\":\"Custom Scrollbars with CSS and Webkit - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/02\\\/custom-scrollbars-style-css-webkit-codexworld.png\",\"datePublished\":\"2017-02-23T16:43:25+00:00\",\"dateModified\":\"2018-05-30T04:45:30+00:00\",\"description\":\"Custom scrollbars in Webkit - CSS code snippet to change default scrollbar style with pseudo-element in Webkit. Customize the scrollbars with web page UI design.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/02\\\/custom-scrollbars-style-css-webkit-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/02\\\/custom-scrollbars-style-css-webkit-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"custom-scrollbars-style-css-webkit-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/custom-scrollbars-css-webkit\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Custom Scrollbars with CSS and Webkit\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web & Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Custom Scrollbars with CSS and Webkit - CodexWorld","description":"Custom scrollbars in Webkit - CSS code snippet to change default scrollbar style with pseudo-element in Webkit. Customize the scrollbars with web page UI design.","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:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/","og_locale":"en_US","og_type":"article","og_title":"Custom Scrollbars with CSS and Webkit - CodexWorld","og_description":"Custom scrollbars in Webkit - CSS code snippet to change default scrollbar style with pseudo-element in Webkit. Customize the scrollbars with web page UI design.","og_url":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2017-02-23T16:43:25+00:00","article_modified_time":"2018-05-30T04:45:30+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/02\/custom-scrollbars-style-css-webkit-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Custom Scrollbars with CSS and Webkit","datePublished":"2017-02-23T16:43:25+00:00","dateModified":"2018-05-30T04:45:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/"},"wordCount":314,"commentCount":1,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/02\/custom-scrollbars-style-css-webkit-codexworld.png","keywords":["CSS","Scrollbar","Webkit"],"articleSection":["HTML&CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/","url":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/","name":"Custom Scrollbars with CSS and Webkit - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/02\/custom-scrollbars-style-css-webkit-codexworld.png","datePublished":"2017-02-23T16:43:25+00:00","dateModified":"2018-05-30T04:45:30+00:00","description":"Custom scrollbars in Webkit - CSS code snippet to change default scrollbar style with pseudo-element in Webkit. Customize the scrollbars with web page UI design.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/02\/custom-scrollbars-style-css-webkit-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/02\/custom-scrollbars-style-css-webkit-codexworld.png","width":1366,"height":768,"caption":"custom-scrollbars-style-css-webkit-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/custom-scrollbars-css-webkit\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Custom Scrollbars with CSS and Webkit"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web & Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/02\/custom-scrollbars-style-css-webkit-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-z2","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2172","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=2172"}],"version-history":[{"count":5,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2172\/revisions"}],"predecessor-version":[{"id":3298,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2172\/revisions\/3298"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/2173"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=2172"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=2172"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=2172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/div>\nCustom Scrollbar in Div<\/h2>\n
You can create custom scrollbar for div content with Webkit. The element class or id need to be specified in webkit-scrollbar, webkit-scrollbar-track, and webkit-scrollbar-thumb. The following code snippets makes custom scrollbar for a specific div using CSS. CSS Code:<\/b><\/p>\n The following pseudo elements are available for customizing the browser’s scrollbar.<\/p>\n In our example code snippet, only some basic styles are provided for the custom scrollbar. You can change the custom scrollbars style based on your web page UI. To customize the scrollbar, specify the CSS with ::-webkit-scrollbar<\/b>, ::-webkit-scrollbar-track<\/b>, and ::-webkit-scrollbar-thumb<\/b> pseudo elements.<\/p>\n","protected":false},"excerpt":{"rendered":" The web page UI design with custom scrollbar adds an extra value to your website. Custom scrollbars make the website feel and look different. The browser’s scrollbar can be customized using CSS. Using CSS pseudo-element, <\/p>\n","protected":false},"author":1,"featured_media":2173,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[130],"tags":[124,258,259],"class_list":["post-2172","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css","tag-css","tag-scrollbar","tag-webkit","cat-130-id","has_thumb"],"yoast_head":"\n
\nHTML Code:<\/b><\/p>\n<div<\/span> class<\/span>=\"content\"<\/span>>\r\n <!-- div content goes here --><\/span>\r\n<\/div<\/span>>\r\n<\/pre>\n.content<\/span>::-webkit-scrollbar {\r\n width<\/span>:<\/span> 12px<\/span><\/span>;\r\n}\r\n.content<\/span>::-webkit-scrollbar-track {\r\n -webkit-box-shadow<\/span>:<\/span> inset<\/span> 0<\/span> 0<\/span> 6px<\/span><\/span> rgba<\/span>(0,0,0,0.3<\/span>); \r\n border-radius<\/span>:<\/span> 10px<\/span><\/span>;\r\n}\r\n.content<\/span>::-webkit-scrollbar-thumb {\r\n border-radius<\/span>:<\/span> 10px<\/span><\/span>;\r\n -webkit-box-shadow<\/span>:<\/span> inset<\/span> 0<\/span> 0<\/span> 6px<\/span><\/span> rgba<\/span>(0,0,0,0.5<\/span>);\r\n}\r\n<\/pre>\nScrollbar Selectors (Pseudo Elements)<\/h2>\n
\n
::-webkit-scrollbar<\/code> – Select the scrollbar.<\/li>\n::-webkit-scrollbar-button<\/code> – Select the buttons on the scrollbar.<\/li>\n::-webkit-scrollbar-thumb<\/code> – Select the draggable scrolling handle.<\/li>\n::-webkit-scrollbar-track<\/code> – Select the progress bar of the scrollbar.<\/li>\n::-webkit-scrollbar-track-piece<\/code> – Select the progress bar without handle.<\/li>\n::-webkit-scrollbar-corner<\/code> – Select the bottom corner of the scrollbar.<\/li>\n::-webkit-resizer<\/code> – Select the draggable resizing handle.<\/li>\n<\/ul>\nConclusion<\/h2>\n