Kênh Tên Miền chuyên cung cấp tên miền đẹp, giá rẻ! Hãy liên hệ kỹ thuật: 0914205579 - Kinh doanh: 0912191357 để được tư vấn, hướng dẫn miễn phí, Cảm ơn quý khách đã ủng hộ trong thời gian qua!
kiem tien, kiem tien online, kiem tien truc tuyen, kiem tien tren mang
Monday, September 14, 2015

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. }
  10. thumb:hover,scrollbarbutton:hover {
  11. -moz-appearance: none !important;
  12. background-color: rgb(255,0,0) !important;
  13. }
  14. scrollbarbutton {
  15. display: none !important;
  16. }
  17. scrollbar[orient="vertical"] {
  18. min-width: 15px !important;
  19. }
  20. }

0 comments:

Post a Comment

Popular Posts