Thay đổi kiểu thanh cuộn

Question

Có thể thay đổi kiểu thanh cuộn cho tất cả các trình duyệt không? Nếu có, làm thế nào?

Answer 1

Có thể trong Internet Explorer sử dụng một số thuộc tính CSS không chuẩn scrollbar-*. Xem this page để biết công cụ tạo tiện dụng.

Ngoài ra, chỉ có thể sử dụng các giải pháp thanh cuộn được hỗ trợ JavaScript tùy chỉnh. jScrollPane jQuery plugin trông rất đẹp và dễ cài đặt. Here là trang ví dụ.

Answer 2

Không. IE cho phép bạn thiết lập màu cho một số bộ phận cấu thành của thanh cuộn. Opera cho phép một vài nhưng không phải tất cả các kiểu đó.

Kiểu dáng thanh cuộn có mức độ không liên quan ngày càng tăng khi giao diện người dùng di chuyển về phía thanh cuộn dựa trên hình ảnh phức tạp. Trong IE, việc thiết lập bất kỳ màu nào sẽ hoàn nguyên việc hiển thị trở lại thanh cuộn 3D đơn giản kiểu Windows 2000 thay vì bất kỳ chủ đề người dùng có tính chất nào. Người dùng Windows Vista/7 (Aero) có lẽ sẽ không cảm ơn bạn vì điều đó.

Tất nhiên, bạn có thể tạo thanh cuộn ersatz của riêng mình ra khỏi số <div> và tạo kiểu cho chúng theo cách bạn muốn. Nhưng kết quả hầu như luôn luôn hoạt động tồi tệ hơn thanh cuộn thực, vì bạn đang cố gắng sao chép một phần tử giao diện người dùng phức tạp có hành vi dự kiến ​​là khác nhau cho mỗi hệ điều hành. Bạn có thể dành nhiều thời gian sao chép hành vi phân trang, bàn phím lên/xuống và bánh xe chuột, nhưng nó sẽ không bao giờ khá cảm thấy trơn tru như một thanh cuộn hệ điều hành thực.

Answer 3

Bạn có thể tạo kiểu thanh cuộn cho tất cả các trình duyệt bằng một chút Javascript. Nhưng hiện tại không có cách nào để tạo kiểu cho chúng chỉ sử dụng CSS như một giải pháp đa trình duyệt.

This article will help if you decide to use Javascript.

Answer 4

Thanh cuộn kiểu dáng và lập trình không được giải quyết theo tiêu chuẩn tại thời điểm này, nhưng một số nhà cung cấp có phần mở rộng để giải quyết vấn đề này trong trình duyệt web trên máy tính để bàn. Plugin jQuery jScrollPane là một lựa chọn tuyệt vời nếu bạn muốn sử dụng thanh cuộn tùy chỉnh.

---

Vendor Extensions

Internet Explorer (bắt đầu với phiên bản 8) có phần mở rộng để CSS và DOM cho phép bạn chỉ định màu sắc duy nhất của các phần khác nhau của một thanh cuộn.

Liên kết được cập nhật cho tài liệu của Microsoft là: http://msdn.microsoft.com/en-us/library/ff974092(v=VS.85).aspx. Bạn sẽ muốn chỉ xem xét tất cả các thuộc tính bắt đầu bằng "-ms-scrollbar".

WebKit (ví dụ: Safari và Chrome) có phần tử CSS giả để tạo kiểu thanh cuộn cho phép bạn áp dụng bất kỳ thuộc tính CSS nào cho nó. Để tìm hiểu thêm thấy Surfin này Safari bài viết trên blog: http://webkit.org/blog/363/styling-scrollbars/

Ví dụ:

::-webkit-scrollbar 
{ 
    width: 13px; 
    height: 13px; 
} 

Mozilla (ví dụ Firefox) và Opera dường như không có bất kỳ sự hỗ trợ cho thanh cuộn phong cách.

---

Tuỳ chỉnh Scrollbars

Về JScrollPane jQuery plugin là một sự lựa chọn tuyệt vời, nếu bạn muốn cuộn tùy chỉnh. Nó khá toàn diện trong việc giải quyết các chức năng dự kiến ​​của thanh cuộn và giúp bạn không bị lăn. Điều quan trọng là nhận ra jScrollPane thay thế thanh cuộn gốc của trình duyệt và bạn có thể không thấy "cảm ứng và đáp ứng" của các thanh cuộn tùy chỉnh đó tốt bằng "điều thực". Nhưng sau đó một lần nữa, nó có thể đủ tốt nếu bạn định giá biểu mẫu trên hàm.

Đây là một liên kết mới hơn cho các tài liệu JScrollPane: http://jscrollpane.kelvinluck.com/