Thanh cuộn CSS tùy chỉnh cho Firefox

Question

Tôi muốn tùy chỉnh kiểu thanh cuộn bằng CSS.

tôi sử dụng mã CSS này WebKit, mà hoạt động tốt cho Safari và Chrome:

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


::-webkit-scrollbar-track-piece { 
background-color: #C2D2E4; 
} 

::-webkit-scrollbar-thumb:vertical { 
height: 30px; 
background-color: #0A4C95; 
} 

Làm thế nào tôi có thể làm điều tương tự cho Firefox?

(Tôi biết tôi có thể dễ dàng làm điều đó bằng jQuery, nhưng tôi muốn làm điều đó với CSS nếu nó doable.)

sẽ được biết ơn đối với chuyên gia tư vấn của ai đó!

Answer 1

Không có Firefox tương đương với ::-webkit-scrollbar và bạn bè.

Bạn sẽ phải gắn bó với JavaScript.

Rất nhiều người sẽ thích tính năng này, xem: https://bugzilla.mozilla.org/show_bug.cgi?id=77790

Báo cáo này được hỏi cho cùng một điều chính xác bạn đang yêu cầu cho: https://bugzilla.mozilla.org/show_bug.cgi?id=547260

Nó đã được đóng cửa như một bản sao của người đầu tiên báo cáo tôi đã liên kết đến.

---

Theo như thay thế Javascript đi, bạn có thể thử:

• https://github.com/noraesae/perfect-scrollbar
• https://github.com/jnicol/trackpad-scroll-emulator
• https://github.com/vitch/jScrollPane (nhưng đó là lỗi thời và dường như một Pita ...)

Answer 2

Tôi nghĩ rằng tôi sẽ chia sẻ phát hiện của tôi trong trường hợp ai đó đang xem xét một JQuery plugin để thực hiện công việc.

Tôi đã cung cấp JQuery Custom Scrollbar một lần. Nó khá lạ mắt và có một số cuộn mượt mà (với cuộn quán tính) và có rất nhiều thông số bạn có thể tinh chỉnh, nhưng nó đã trở thành một chút quá nhiều CPU cho tôi (và nó bổ sung thêm một số tiền hợp lý cho DOM).

Bây giờ tôi đang tặng Perfect Scrollbar một lần. Nó đơn giản và nhẹ (6KB) và nó đang làm một công việc khá tốt cho đến nay. Nó không phải là CPU chuyên sâu ở tất cả (như xa như tôi có thể nói) và thêm rất ít để DOM của bạn. Nó chỉ có một vài tham số để tinh chỉnh (wheelSpeed ​​và wheelPropagation), nhưng đó là tất cả những gì tôi cần và nó xử lý các cập nhật cho nội dung cuộn độc đáo (chẳng hạn như tải hình ảnh).

P.S. Tôi đã có một cái nhìn nhanh về JScrollPane, nhưng @simone là đúng, nó là một chút ngày nay và một PITA.

Answer 3

Nó hoạt động theo kiểu người dùng và có vẻ như không hoạt động trong các trang web. Tôi đã không tìm thấy hướng chính thức từ Mozilla về điều này. Trong khi nó có thể đã làm việc tại một số điểm, Firefox không có hỗ trợ chính thức cho việc này. Lỗi này vẫn mở https://bugzilla.mozilla.org/show_bug.cgi?id=77790

scrollbar { 
/* clear useragent default style*/ 
    -moz-appearance: none !important; 
} 
/* buttons at two ends */ 
scrollbarbutton { 
    -moz-appearance: none !important; 
} 
/* the sliding part*/ 
thumb{ 
    -moz-appearance: none !important; 
} 
scrollcorner { 
    -moz-appearance: none !important; 
    resize:both; 
} 
/* vertical or horizontal */ 
scrollbar[orient="vertical"] { 
    color:silver; 
} 

kiểm tra http://codemug.com/html/custom-scrollbars-using-css/ để biết chi tiết.

Answer 4

Tôi có thể cung cấp giải pháp thay thế không?

Không kịch bản nào, chỉ có kiểu CSS tiêu chuẩn hóa và một chút sáng tạo. Câu trả lời ngắn - che các phần của thanh cuộn trình duyệt hiện tại, có nghĩa là bạn giữ lại tất cả chức năng của nó.

.scroll_content { 
    position: relative; 
    width: 400px; 
    height: 414px; 
    top: -17px; 
    padding: 20px 10px 20px 10px; 
    overflow-y: auto; 
} 

Đối với bản demo và một chút sâu hơn giải thích, đánh dấu vào đây ...

jsfiddle.net/aj7bxtjz/1/

Answer 5

@-moz-document url-prefix(http://),url-prefix(https://) { 
    scrollbar { 
     -moz-appearance: none !important; 
     background: rgb(0,255,0) !important; 
    } 
    thumb,scrollbarbutton { 
     -moz-appearance: none !important; 
     background-color: rgb(0,0,255) !important; 
    } 

    thumb:hover,scrollbarbutton:hover { 
     -moz-appearance: none !important; 
     background-color: rgb(255,0,0) !important; 
    } 
    scrollbarbutton { 
     display: none !important; 
    } 
    scrollbar[orient="vertical"] { 
     min-width: 15px !important; 
    } 
}