ปรับแถบเลื่อนให้เหมาะกับค่ากำหนดคอนทราสต์สูง

ผู้ใช้ที่เปิดใช้โหมดคอนทราสต์สูงในระบบปฏิบัติการหรือเบราว์เซอร์คาดหวังว่าองค์ประกอบ UI (เช่น แถบเลื่อน) จะอ่านได้ง่ายมาก โดยมักจะอาศัยการแยกพื้นหน้าและพื้นหลังอย่างชัดเจนแทนที่จะใช้สีเทาหรือสีธีมที่กลมกลืนกัน

คู่มือนี้จะให้วิธีการที่ไม่บังคับเกี่ยวกับวิธีใช้ฟีเจอร์สื่อ CSS @media (prefers-contrast: more) เพื่อบังคับใช้การจัดรูปแบบแถบเลื่อนที่มีคอนทราสต์สูง

ปรับปรุงความสามารถในการอ่าน

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

ไม่บังคับ: ใช้บล็อก @media (prefers-contrast: more) เพื่อกำหนดสีเข้มที่แตกต่างกันสำหรับปุ่มเลื่อนและแทร็ก

/* Define default standard colors as variables */
.scroller {
  --scrollbar-thumb: #bbb;
  --scrollbar-track: #f1f1f1;

  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

/* OPTIONAL: Provide clear, high-contrast overrides */
@media (prefers-contrast: more) {
  .scroller {
    /* Use extremely distinct colors like solid black against white */
    --scrollbar-thumb: #000000;
    --scrollbar-track: #ffffff;
  }
}

ปัญหาที่ควรทราบเมื่อใช้ scrollbar-color

• ห้ามใส่ภาพเคลื่อนไหวหรือการเปลี่ยนภาพให้กับ scrollbar-color ข้อบกพร่องของ WebKit ทำให้แถบเลื่อนกะพริบทุกครั้งที่ scrollbar-color มีการเปลี่ยนแปลง
• ใน macOS ระบบจะละเว้นพร็อพเพอร์ตี้ scrollbar-color (มาตรฐาน) และ ::-webkit-scrollbar (เดิม) โดยค่าเริ่มต้น เนื่องจาก macOS ใช้แถบเลื่อน "วางซ้อน" แบบเนทีฟ คุณต้องจับคู่สีแบบกำหนดเองกับ scrollbar-width (เช่น thin หรือ auto) เพื่อบังคับให้ macOS แสดงผลสีเหล่านั้น
• แม้ว่าจะใช้ scrollbar-width แล้ว แต่แถบเลื่อนแบบวางซ้อนของ macOS จะแสดงผลแทร็ก (ราง) เป็นแบบโปร่งใสโดยค่าเริ่มต้น หากการออกแบบกำหนดให้ต้องมีสีพื้นหลังของแทร็กที่มองเห็นได้ใน MacOS คุณต้องใช้ scrollbar-gutter: stable; กับคอนเทนเนอร์ที่เลื่อนได้ แต่โปรดทราบว่าสีพื้นหลังจะปรากฏหลังจากที่ผู้ใช้วางเมาส์เหนือแถบเลื่อนเท่านั้น
• แม้จะใช้ scrollbar-gutter: stable แทร็กก็อาจโปร่งใสใน MacOS Thumb ไม่ควรขึ้นอยู่กับสีของแทร็กเพื่อให้มองเห็นได้

การสำรองและการรองรับเบราว์เซอร์

การรองรับเบราว์เซอร์และทางเลือกสำหรับ 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);
  }
}