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

Tôi muốn tùy chỉnh một thanh cuộn với CSS.

Tôi sử dụng mã CSS WebKit này, 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ự trong Firefox?

Tôi biết tôi có thể dễ dàng làm điều đó bằng jQuery, nhưng tôi thích làm điều đó với CSS thuần hơn nếu có thể.

Sẽ biết ơn lời khuyên chuyên môn của ai đó!

Tính đến cuối năm 2018, hiện đã có tùy chỉnh giới hạn trong Firefox!

Xem những câu trả lời sau:

• https://stackoverflow.com/a/54101063/405015
• https://stackoverflow.com/a/53739309/405015

Và điều này cho thông tin cơ bản: https://ormszilla.mozilla.org/show_orms.cgi?id=1460109

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

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

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

Theo như thay thế JavaScript, bạn có thể thử:

• https://github.com/noraesae/perinf-scrollbar
• https://github.com/jnicol/trackpad-scroll-emulator
• https://github.com/vitch/jScrollPane (nhưng nó đã lỗi thời và rõ ràng là một PITA ...)

Firefox 64 cho biết thêm hỗ trợ cho spec dự thảo CSS Scrollbars Mô-đun Level 1 , có thêm hai thuộc tính mới của scrollbar-widthvà scrollbar-colortrong đó đưa ra một số kiểm soát cách thanh cuộn được hiển thị.

Bạn có thể đặt scrollbar-colorthành một trong các giá trị sau (mô tả từ MDN):

• auto Kết xuất nền tảng mặc định cho phần theo dõi của thanh cuộn, trong trường hợp không có bất kỳ thuộc tính màu thanh cuộn liên quan nào khác.
• dark Hiển thị thanh cuộn tối, có thể là biến thể tối của thanh cuộn được cung cấp bởi nền tảng hoặc thanh cuộn tùy chỉnh có màu tối.
• light Hiển thị thanh cuộn nhẹ, có thể là biến thể ánh sáng của thanh cuộn được cung cấp bởi nền tảng hoặc thanh cuộn tùy chỉnh có màu sáng.
• <color> <color> Áp dụng màu đầu tiên cho ngón tay cái của thanh cuộn, màu thứ hai cho rãnh trên thanh cuộn.

Lưu ý rằng darkvà lightcác giá trị hiện không được triển khai trong Firefox .

ghi chú macOS:

Các thanh cuộn bán trong suốt tự động ẩn mặc định là macOS có thể được tô màu theo quy tắc này (chúng vẫn chọn màu tương phản của riêng chúng dựa trên nền). Chỉ các thanh cuộn hiển thị vĩnh viễn (Tùy chọn hệ thống> Hiển thị thanh cuộn> Luôn luôn) được tô màu.

Trình diễn trực quan:

.scroll {
  width: 20%;
  height: 100px;
  border: 1px solid grey;
  overflow: scroll;
  display: inline-block;
}
.scroll-color-auto {
  scrollbar-color: auto;
}
.scroll-color-dark {
  scrollbar-color: dark;
}
.scroll-color-light {
  scrollbar-color: light;
}
.scroll-color-colors {
  scrollbar-color: orange lightyellow;
}

<div class="scroll scroll-color-auto">
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>

<div class="scroll scroll-color-dark">
<p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p>
</div>

<div class="scroll scroll-color-light">
<p>light</p><p>light</p><p>light</p><p>light</p><p>light</p><p>light</p>
</div>

<div class="scroll scroll-color-colors">
<p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p>
</div>

Bạn có thể đặt scrollbar-widththành một trong các giá trị sau (mô tả từ MDN):

• auto Chiều rộng thanh cuộn mặc định cho nền tảng.
• thin Một biến thể chiều rộng thanh cuộn mỏng trên các nền tảng cung cấp tùy chọn đó hoặc thanh cuộn mỏng hơn so với chiều rộng thanh cuộn nền tảng mặc định.
• none Không có thanh cuộn nào được hiển thị, tuy nhiên phần tử vẫn sẽ có thể cuộn được.

Bạn cũng có thể đặt giá trị độ dài cụ thể, theo thông số kỹ thuật. Cả hai thinvà độ dài cụ thể có thể không làm bất cứ điều gì trên tất cả các nền tảng và chính xác những gì nó làm là dành riêng cho nền tảng. Cụ thể, Firefox dường như không hỗ trợ giá trị độ dài cụ thể ( nhận xét này về trình theo dõi lỗi của họ dường như xác nhận điều này ). Các thinkeywork dường như được hỗ trợ tốt, tuy nhiên, với ít nhất là hỗ trợ macOS và Windows.

Có lẽ đáng lưu ý rằng tùy chọn giá trị độ dài và toàn bộ thuộc scrollbar-widthtính đang được xem xét để xóa trong dự thảo trong tương lai và nếu điều đó xảy ra, thuộc tính cụ thể này có thể bị xóa khỏi Firefox trong phiên bản tương lai.

Trình diễn trực quan:

.scroll {
  width: 30%;
  height: 100px;
  border: 1px solid grey;
  overflow: scroll;
  display: inline-block;
}
.scroll-width-auto {
  scrollbar-width: auto;
}
.scroll-width-thin {
  scrollbar-width: thin;
}
.scroll-width-none {
  scrollbar-width: none;
}

<div class="scroll scroll-width-auto">
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>

<div class="scroll scroll-width-thin">
<p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p>
</div>

<div class="scroll scroll-width-none">
<p>none</p><p>none</p><p>none</p><p>none</p><p>none</p><p>none</p>
</div>

Tôi có thể cung cấp một sự thay thế?

Không có kịch bản nào, chỉ có các kiểu css được 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 có, có nghĩa là bạn giữ lại tất cả cá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;
}

Để xem demo và giải thích sâu hơn một chút, xem tại đây ...

jsfiddle.net/aj7bxtjz/1/

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

Tôi đã cho JQuery Custom Scrollbar đi. Nó khá lạ mắt và thực hiện một số thao tác cuộn mượt mà (với quán tính cuộn) và có vô số tham số bạn có thể điều chỉnh, nhưng cuối cùng tôi lại quá tốn CPU (và nó bổ sung một lượng khá lớn vào DOM).

Bây giờ tôi đang cho Perfect Scrollbar đi. Nó đơn giản và nhẹ (6KB) và cho đến nay nó vẫn hoạt động tốt. Nó hoàn toàn không tốn CPU (theo như tôi có thể nói) và thêm rất ít vào DOM của bạn. Nó chỉ có một vài tham số để điều 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).

Tái bút: Tôi đã có một cái nhìn nhanh về JScrollPane, nhưng @simone đã đúng, hiện tại nó hơi cũ và là một PITA.

Kể từ Firefox 64 , có thể sử dụng thông số kỹ thuật mới cho kiểu dáng Thanh cuộn đơn giản ( không đầy đủ như trong Chrome với tiền tố nhà cung cấp ).

Trong ví dụ này có thể thấy một giải pháp kết hợp các quy tắc khác nhau để giải quyết cả Firefox và Chrome với kết quả cuối cùng (không bằng nhau) (ví dụ sử dụng quy tắc Chrome gốc của bạn):

Các quy tắc chính là:

Dành cho Firefox

.scroller {
  overflow-y: scroll;
  scrollbar-color: #0A4C95 #C2D2E4;
}

Dành cho Chrome

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

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

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

Xin lưu ý rằng đối với giải pháp của bạn, có thể sử dụng các quy tắc Chrome đơn giản hơn như sau:

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

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

Cuối cùng, để ẩn mũi tên trong thanh cuộn cũng trong Firefox, hiện tại cần thiết phải đặt nó là " mỏng " theo quy tắc sauscrollbar-width: thin;

Năm 2020 công trình này

/* Thin Scrollbar */
:root{
  scrollbar-color: rgb(210,210,210) rgb(46,54,69) !important;
  scrollbar-width: thin !important;
}

https://github.com/Aris-t2/CustomCSSforFx/issues/160

Nó hoạt động theo kiểu người dùng và dường như không hoạt động trong các trang web. Tôi chưa tìm thấy hướng chính thức từ Mozilla về điều này. Mặc dù có thể nó đã hoạt động vào một lúc nào đó, Firefox không có hỗ trợ chính thức cho việc này. Lỗi này vẫn đang mở https://ormszilla.mozilla.org/show_orms.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-USE-css/ để biết chi tiết.

@-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;
    }
}