Tùy chỉnh thanh cuộn cho IE, Chrome và Firefox bằng CSS

Sử dụng Tùy chỉnh Thanh cuộn trong trang web của bạn có thể rất bắt mắt và tạo sự ấn tượng về thiết kế của trang web bạn. Đối với người thiết kế web, việc sử dụng JavaScript để tùy chỉnh là rất phức tạp. Thay vào đó, bạn có thể dễ dàng tùy chỉnh Thanh cuộn với CSS. Trước đây có thể việc sử dụng CSS chỉ có thể làm việc trên trình duyệt Internet Explorer. Nhưng gần đây, CSS có thể làm việc hầu hết trên mọi trình duyệt. Và sau đây là một số hướng dẫn tùy chỉnh trên các trình duyệt thông dụng.

Tùy chỉnh trên trình duyệt Internet Explorer
Code:

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-color: black;
8. scrollbar-shadow-color: #C0C0C0;
9. scrollbar-dark-shadow-color: #C0C0C0;
10. }

Tùy chỉnh trên trình duyệt Chrome
Code:

1. ::-webkit-scrollbar { width: 3px; height: 3px;}
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 { height: 50px; background-color: #666; border-radius: 3px;}
6. ::-webkit-scrollbar-corner { background-color: #999;}}
7. ::-webkit-resizer { background-color: #666;}

Giải thích:

Với trình duyệt Chrome và Webkit, bạn có thể dễ dàng tùy chỉnh Thanh cuộn hơn trên trình duyệt IE, không chỉ thay đổi màu sắc, bạn có thể áp dụng các thuộc tính radius, transparency trên thanh cuộn.

Tùy chỉnh trên trình duyệt Firefox

Code:

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

Author : Thành Phạm

Share this

Related Posts