เปลี่ยนสกอร์บาร์ให้แหวกแนว สีสันไม่เหมือนใคร

หน้าแรก » ข่าวสาร » เปลี่ยนสกอร์บาร์ให้แหวกแนว สีสันไม่เหมือนใคร

Using Custom scrollbars in your website can be really eye-catching and they go well with the website’s design. For web designers, it’s difficult creating them with JavaScript. Instead, you can create custom scrollbars using CSS. According to my acknowledge, it only worked in Internet Explorer. During my recent project, my client required the scrollbar to be stylized with CSS, and make it work in most mainstream browsers. So after a bit of googling, I found the tricks to do so and share them with you here.

Custom scrollbars for Internet Explorer

1 body{
2   scrollbar-base-color#C0C0C0;
3   scrollbar-base-color#C0C0C0;
4   scrollbar-3dlight-color#C0C0C0;
5   scrollbar-highlight-color#C0C0C0;
6   scrollbar-track-color#EBEBEB;
7   scrollbar-arrow-colorblack;
8   scrollbar-shadow-color#C0C0C0;
9   scrollbar-dark-shadow-color#C0C0C0;
10 }

In case you don’t know what these attributes mean, here is the scrollbar map that will help you understand.

custom scrollbars map for Internet Explorer

custom scrollbar map for Internet Explorer

Use the above code for the tags you want to stylize, or use it in body, to stylize all scrollbars in the document. If you’re lazy enough to customize by yourself, there are some code generator you can use, this Custom Scrollbars Generator is nice.

Custom scrollbars for Chrome

1 ::-webkit-scrollbar { width3pxheight3px;}
2 ::-webkit-scrollbar-button {  background-color#666; }
3 ::-webkit-scrollbar-track {  background-color#999;}
4 ::-webkit-scrollbar-track-piece { background-color#ffffff;}
5 ::-webkit-scrollbar-thumb { height50pxbackground-color#666; border-radius:3px;}
6 ::-webkit-scrollbar-corner { background-color#999;}}
7 ::-webkit-resizer { background-color#666;}

There’s also a scrollbar pieces map for you:

custom scrollbar map for Chrome

custom scrollbar map for Chrome

Obviously, Chrome and webkit based browsers can do more custom work than IE, not just colors, you can apply radius, transparency on scrollbars, that’s way more flexible than IE.

Custom scrollbars for Firefox

1 @-moz-document url-prefix(http://),url-prefix(https://) {
2 scrollbar {
3    -moz-appearance: none !important;
4    backgroundrgb(0,255,0!important;
5 }
6 thumb,scrollbarbutton {
7    -moz-appearance: none !important;
8    background-colorrgb(0,0,255!important;
9 }
11 thumb:hover,scrollbarbutton:hover {
12    -moz-appearance: none !important;
13    background-colorrgb(255,0,0!important;
14 }
16 scrollbarbutton {
17    displaynone !important;
18 }
20 scrollbar[orient="vertical"] {
21   min-width15px !important;
22 }
23 }

The CSS code above for Firefox is a little different. But it can generate same custom scrollbars like Chrome do. And by using orient=”vertical” you can apply different styles for verticle and horzontal scrollbars, sounds like fun.

Though the css way of customization is simple, it does look a bit rough. Alternatively, you can use javascript-based scrollbars which give you more custom options. Remeber, it’s not necessary to change your website scrollbars, you should keep the design simple, not too fancy.


มาประยุกต์ในการพัฒนาการให้บริการอยู่ตลอดเวลา เพื่อสร้างความพึงพอใจสูงสุดให้แก่ลูกค้าทุกท่าน
ด้วยประสบการณ์ที่เรามีอยู่นั้น ทำให้มั่นใจได้ว่าลูกค้าทุกท่านจะได้รับการบริการที่ดีจากเรา





บริษัท ดีไซน์นำโชค จำกัด
58/146 หมู่ที่ 6 หมู่บ้านซื่อตรง คลอง13 ตำบลบึงน้ำรักษ์ อำเภอธัญบุรี จังหวัดปทุมธานี 12110

2014 Powered by
Tel: 082-493-2295 E-mail: