เครื่องมือสร้าง CSS Scrollbar

Chrome, Safari และ Edge จัดรูปแบบแถบเลื่อนด้วยตระกูล pseudo-element ::-webkit-scrollbar: กฎแยกสำหรับพื้นหลัง, ที่ลาก และสถานะ hover ของที่ลาก พร้อมความกว้างที่แม่นยำระดับพิกเซลและ border-radius ของที่ลาก ส่วน Firefox เมินกฎเหล่านั้นทั้งหมด และอ่านคุณสมบัติมาตรฐานสองตัวคือ scrollbar-width และ scrollbar-color ซึ่งถูกเพิ่มในสเปก CSS Scrollbars ทีหลัง นี่ไม่ใช่สองสำเนียงของคุณสมบัติเดียวกัน — แต่เป็นชุดคุณสมบัติสองชุดที่เพดานความสามารถต่างกัน และเครื่องมือสร้าง scrollbar ส่วนใหญ่มักปิดบังช่องว่างนี้โดยแสดงเฉพาะผลลัพธ์ของ WebKit แต่เครื่องมือนี้ไม่ทำอย่างนั้น

ตั้งค่าความกว้าง, สีพื้นหลัง, สีที่ลาก, สีเมื่อชี้ และรัศมีมุมที่ลากเพียงครั้งเดียว เครื่องมือจะสร้างชุดกฎสองชุดจากอินพุตเดียวกัน บล็อก WebKit กำหนดขอบเขต ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb และสถานะ :hover ของมันไว้ในกล่องสาธิตด้านซ้าย ดังนั้นสิ่งที่คุณเห็นคือสิ่งที่ Chrome, Safari และ Edge แสดงผลจริง — เอนจินแท้ของเบราว์เซอร์เอง ไม่ใช่ภาพซ้อนทับจำลอง บล็อก Firefox ตั้งค่า scrollbar-width และ scrollbar-color บนกล่องสาธิตด้านขวาโดยใช้เอนจินของเบราว์เซอร์นั้น ซึ่งเป็นเหตุผลว่าทำไมกล่องดูแตกต่างก็ต่อเมื่อหน้าเว็บนี้เปิดอยู่ใน Firefox จริงๆ; ในเบราว์เซอร์ WebKit ตรงนั้นจะแสดงแถบเลื่อนดีฟอลต์ของมันเอง และเครื่องมือก็บอกแบบนั้นแทนที่จะปลอมแปลงลักษณะ Firefox ด้วยพิกเซลที่ยืมมา

การแม็ปความกว้างเป็นตัวอย่างที่ชัดเจนที่สุดของช่องว่าง: scrollbar-width ของ Firefox รับเฉพาะคีย์เวิร์ด auto, thin หรือ none — ไม่เคยรับค่าพิกเซลเป๊ะๆ เลย ตัวสร้างนี้แม็ปความกว้างที่คุณเลือกอย่างตรงไปตรงมา (8px หรือน้อยกว่าจะกลายเป็น thin, มากกว่านั้นเป็น auto) และแสดงคีย์เวิร์ดผลลัพธ์ข้างอินพุตของคุณ แทนที่จะสร้างผลลัพธ์ Firefox แบบพิกเซลสมบูรณ์ที่ไม่มีอยู่จริง Firefox ยังไม่มีวิธีตั้งค่าสี hover แยก, border-radius อิสระของที่ลาก หรือสีพื้นหลังที่ไม่ใช่แค่ค่าที่สองของ scrollbar-color — นี่คือข้อจำกัดถาวรและแท้จริงของแพลตฟอร์ม ไม่ใช่การละเว้นของเครื่องมือนี้

คัดลอกบล็อก CSS ที่รวมแล้ว ชุดกฎทั้งสองจะไปด้วยกันภายใต้คอมเมนต์ของแต่ละอัน พร้อมวางลงในสไตล์ชีตได้ทันที ทุกอย่างแสดงผลและอัปเดตในเบราว์เซอร์ของคุณขณะที่คุณลากตัวควบคุม — ไม่มีการอัปโหลด ไม่มีบัญชี ไม่ต้องส่งข้อมูลไปกลับเซิร์ฟเวอร์ และยังทำงานแบบออฟไลน์ได้เมื่อโหลดหน้าเว็บแล้ว