ปรับแต่งสีหรือความหนาของแถบเลื่อน

คุณปรับแต่งลักษณะที่ปรากฏของแถบเลื่อนได้โดยใช้พร็อพเพอร์ตี้ CSS มาตรฐาน scrollbar-color และ scrollbar-width

• scrollbar-color: ยอมรับค่า <color> 2 ค่า โดยสีแรกจะใช้กับปุ่มเลื่อน (ส่วนที่เคลื่อนไหว) และสีที่ 2 จะใช้กับแทร็ก (พื้นหลังที่คงที่)
• scrollbar-width: ยอมรับ auto (ค่าเริ่มต้น), thin (ตัวแปรที่บางกว่า) หรือ none (ซ่อนแถบเลื่อนโดยสมบูรณ์ขณะที่ยังคงความสามารถในการเลื่อน)

ใช้ scrollbar-color และ scrollbar-width

บังคับ: ใช้ scrollbar-color และ scrollbar-width ในคอนเทนเนอร์ที่เลื่อนได้

เมื่อใช้ scrollbar-color ให้ใช้ตัวแปร CSS เพื่อแยกสีของ Thumb และ Track ออกจากกัน เพื่อให้อ่านและดูแลรักษาได้ง่าย (โดยเฉพาะเมื่อใช้การสำรอง)

.scroller {
  --scrollbar-thumb: var(--color-neutral-70);
  --scrollbar-track: var(--color-neutral-90);

  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

กลยุทธ์สำรอง

การรองรับเบราว์เซอร์และทางเลือกสำหรับ scrollbar-color

ฟีเจอร์นี้เป็นการเพิ่มประสิทธิภาพแบบต่อเนื่องและไม่จำเป็นต้องใช้กลยุทธ์สำรองเสมอไป

หากการจัดรูปแบบมีความสำคัญและเป้าหมาย Baseline ของผู้ใช้คือ "Baseline ที่พร้อมใช้งานในวงกว้าง" หรือเก่ากว่า คุณควรใส่องค์ประกอบเทียม ::-webkit-scrollbar ที่ไม่ใช่มาตรฐานเป็นทางเลือกสำรอง

รวมการใช้ CSS แบบเดิมไว้ในบล็อก @supports not (scrollbar-color: auto) เพื่อป้องกันความขัดแย้งระหว่างพร็อพเพอร์ตี้มาตรฐานกับตัวเลือก WebKit แบบเดิมในเบราว์เซอร์ที่รองรับทั้ง 2 แบบโดยค่าเริ่มต้น

หากคุณใช้คุณสมบัติที่กำหนดเองเพื่อกำหนดสี คุณสมบัติเหล่านี้จะเรียงซ้อนไปยังตัวเลือก WebKit เดิมโดยอัตโนมัติ คุณไม่จำเป็นต้องทำซ้ำ

/* Legacy fallback for WebKit/Blink browsers */
@supports not (scrollbar-color: auto) {
  .scroller::-webkit-scrollbar {
    /* Must define base size in WebKit for custom colors to be visual */
    width: 12px;
    height: 12px;
  }

  .scroller::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
  }

  .scroller::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
}