CSS เลื่อนที่กำหนดเองสำหรับ Firefox

ฉันต้องการปรับแต่งแถบเลื่อนด้วย CSS

ฉันใช้โค้ด CSS ของ WebKit ซึ่งทำงานได้ดีสำหรับ Safari และ Chrome:

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

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

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

ฉันจะทำสิ่งเดียวกันใน Firefox ได้อย่างไร

ฉันรู้ว่าฉันสามารถทำได้โดยใช้ jQuery แต่ฉันอยากทำด้วย CSS บริสุทธิ์ถ้าทำได้

จะขอบคุณสำหรับคำแนะนำจากผู้เชี่ยวชาญของใครบางคน!

เมื่อถึงปลายปี 2561 มีการปรับแต่งที่ จำกัด ใน Firefox!

ดูคำตอบเหล่านี้:

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

และนี่คือข้อมูลพื้นฐาน: https://bugzilla.mozilla.org/show_bug.cgi?id=1460109

ไม่มี Firefox เทียบเท่ากับ::-webkit-scrollbarและเพื่อน ๆ

คุณจะต้องติดกับจาวาสคริปต์

ผู้คนมากมายต้องการคุณลักษณะนี้โปรดดู: https://bugzilla.mozilla.org/show_bug.cgi?id=77790

ตราบใดที่การแทนที่ JavaScript ดำเนินไปคุณสามารถลอง:

• https://github.com/noraesae/perfect-scrollbar
• https://github.com/jnicol/trackpad-scroll-emulator
• https://github.com/vitch/jScrollPane (แต่ล้าสมัยและเห็นได้ชัดว่าเป็น PITA ... )

Firefox 64 เพิ่มการสนับสนุนสำหรับร่างข้อมูลจำเพาะCSS แถบเลื่อนโมดูลระดับ 1ซึ่งจะเพิ่มสองคุณสมบัติใหม่ของscrollbar-widthและscrollbar-colorที่ให้การควบคุมบางกว่าวิธีการเลื่อนจะมีการแสดง

คุณสามารถตั้งค่าscrollbar-colorเป็นหนึ่งในค่าต่อไปนี้ (คำอธิบายจาก MDN):

• auto การแสดงผลแพลตฟอร์มเริ่มต้นสำหรับส่วนการติดตามของแถบเลื่อนในกรณีที่ไม่มีคุณสมบัติสีอื่น ๆ ที่เกี่ยวข้องกับแถบเลื่อน
• dark แสดงแถบเลื่อนสีเข้มซึ่งอาจเป็นตัวแปรสีเข้มของแถบเลื่อนที่จัดทำโดยแพลตฟอร์มหรือแถบเลื่อนที่กำหนดเองที่มีสีเข้ม
• light แสดงแถบเลื่อนแบบแสงซึ่งอาจเป็นชุดตัวเลือกแบบเลื่อนที่จัดเตรียมโดยแพลตฟอร์มหรือแถบเลื่อนแบบกำหนดเองที่มีสีอ่อน
• <color> <color> ใช้สีแรกกับนิ้วหัวแม่มือของแถบเลื่อนแถบที่สองของแทร็กบาร์

โปรดทราบว่าdarkและlightค่าไม่ได้นำมาใช้ใน Firefox ในปัจจุบัน

บันทึก macOS:

แถบเลื่อนกึ่งโปร่งใสที่ซ่อนอัตโนมัติซึ่งเป็นค่าเริ่มต้นของ macOS จะไม่สามารถใช้สีกับกฎนี้ได้ (พวกเขายังคงเลือกสีตัดกันตามพื้นหลัง) แถบเลื่อนที่แสดงอย่างถาวรเท่านั้น (การตั้งค่าระบบ> แสดงแถบเลื่อน> เสมอ) เป็นสี

การสาธิตด้วยภาพ:

.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>

คุณสามารถตั้งค่าscrollbar-widthเป็นหนึ่งในค่าต่อไปนี้ (คำอธิบายจาก MDN):

• auto ความกว้างของแถบเลื่อนเริ่มต้นสำหรับแพลตฟอร์ม
• thin ตัวแปรความกว้างของแถบเลื่อนบาง ๆ บนแพลตฟอร์มที่มีตัวเลือกนั้นหรือแถบเลื่อนที่บางกว่าความกว้างของแถบเลื่อนแพลตฟอร์มเริ่มต้น
• none ไม่แสดงแถบเลื่อน แต่องค์ประกอบจะยังคงสามารถเลื่อนได้

นอกจากนี้คุณยังสามารถตั้งค่าความยาวที่เฉพาะเจาะจงตามสเป็ค ทั้งthinความยาวและความยาวที่ระบุอาจไม่ทำอะไรบนแพลตฟอร์มทั้งหมดและสิ่งที่มันทำคือเฉพาะแพลตฟอร์ม โดยเฉพาะอย่างยิ่ง Firefox ไม่ปรากฏว่าขณะนี้สนับสนุนค่าความยาวเฉพาะ ( ความคิดเห็นนี้ในตัวติดตามบั๊กของพวกเขาดูเหมือนจะยืนยันสิ่งนี้ ) thinkeywork ไม่ปรากฏว่าได้รับการสนับสนุนอย่างดีอย่างไรกับ MacOS และการสนับสนุนของ Windows ที่น้อย

อาจเป็นที่น่าสังเกตว่าตัวเลือกค่าความยาวและscrollbar-widthคุณสมบัติทั้งหมดกำลังได้รับการพิจารณาเพื่อนำออกในร่างฉบับร่างในอนาคตและหากเกิดเหตุการณ์เช่นนี้สถานที่ให้บริการเฉพาะนี้อาจถูกลบออกจาก Firefox ในรุ่นอนาคต

การสาธิตด้วยภาพ:

.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>

ฉันขอเสนอทางเลือกอื่นได้ไหม

ไม่มีการเขียนสคริปต์ใด ๆ สไตล์ CSS เท่านั้นที่เป็นมาตรฐานและความคิดสร้างสรรค์เล็กน้อย คำตอบสั้น ๆ - ปกปิดส่วนต่าง ๆ ของแถบเลื่อนเบราว์เซอร์ที่มีอยู่ซึ่งหมายความว่าคุณยังคงใช้งานได้ทั้งหมด

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

สำหรับการสาธิตและคำอธิบายเชิงลึกเพิ่มเติมเล็กน้อยตรวจสอบที่นี่ ...

jsfiddle.net/aj7bxtjz/1/

ฉันคิดว่าฉันจะแบ่งปันสิ่งที่ค้นพบในกรณีที่มีคนกำลังพิจารณาปลั๊กอิน JQuery เพื่อทำงาน

ฉันเลื่อน JQuery Custom Scrollbarไป มันสวยแฟนซีและทำการเลื่อนอย่างราบรื่น (ด้วยความเฉื่อยเลื่อน) และมีพารามิเตอร์มากมายที่คุณสามารถปรับแต่งได้ แต่ท้ายที่สุดมันก็กลายเป็นซีพียูที่เข้มข้นเกินไปสำหรับฉัน

ตอนนี้ฉันกำลังให้Perfect Scrollbarไปแล้ว มันเรียบง่ายและมีน้ำหนักเบา (6KB) และมันทำงานได้ดีมาก มันไม่ได้ใช้ CPU มาก (เท่าที่ฉันสามารถบอกได้) และเพิ่มน้อยมากใน DOM ของคุณ มีเพียงสองสามพารามิเตอร์ในการปรับแต่ง (wheelSpeed ​​และ wheelPropagation) แต่ทั้งหมดที่ฉันต้องการและจัดการการอัปเดตเนื้อหาการเลื่อนได้อย่างดี (เช่นการโหลดรูปภาพ)

ป.ล. ฉันได้ดู JScrollPane อย่างรวดเร็ว แต่ @simone ถูกต้องมันเก่าไปแล้วและ PITA

ตั้งแต่Firefox 64เป็นไปได้ที่จะใช้ข้อมูลจำเพาะใหม่สำหรับสไตล์การเลื่อนแบบง่าย ( ไม่สมบูรณ์เหมือนใน Chrome พร้อมคำนำหน้าผู้ขาย )

ในตัวอย่างนี้เป็นไปได้ที่จะเห็นโซลูชันที่รวมกฎที่แตกต่างกันเพื่อจัดการทั้ง Firefox และ Chrome กับผลลัพธ์สุดท้ายที่คล้ายกัน (ไม่เท่ากัน) (ตัวอย่างใช้กฎ Chrome เดิมของคุณ):

กฎสำคัญคือ:

สำหรับ Firefox

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

สำหรับ 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;
}

โปรดทราบว่าการเคารพโซลูชันของคุณเป็นไปได้ที่จะใช้กฎของ Chrome ที่ง่ายขึ้นดังต่อไปนี้:

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

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

สุดท้ายเพื่อซ่อนลูกศรในแถบเลื่อนใน Firefox ในปัจจุบันมีความจำเป็นต้องตั้งค่าเป็น " thin " ด้วยกฎต่อไปscrollbar-width: thin;

ปี 2020 งานนี้

/* 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

มันทำงานในสไตล์ผู้ใช้และดูเหมือนว่าจะไม่ทำงานในหน้าเว็บ ฉันไม่พบทิศทางที่เป็นทางการจาก Mozilla ในเรื่องนี้ ในขณะที่มันอาจทำงานได้ในบางจุด Firefox ไม่ได้รับการสนับสนุนอย่างเป็นทางการสำหรับเรื่องนี้ ข้อผิดพลาดนี้ยังคงเปิดอยู่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;
}

ตรวจสอบhttp://codemug.com/html/custom-scrollbars-using-css/ สำหรับรายละเอียด

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