ตัวสร้างแถบเลื่อน CSS

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

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

การแมปความกว้างเป็นตัวอย่างที่ชัดเจนที่สุดของช่องว่าง: ความกว้างของแถบเลื่อนของ Firefox ยอมรับเฉพาะคำหลักอัตโนมัติ บาง หรือไม่มีเลย โดยจะไม่ระบุจำนวนพิกเซลที่แน่ชัด ตัวสร้างนี้แมปความกว้างที่คุณเลือกอย่างตรงไปตรงมา (8px และต่ำกว่าจะกลายเป็นแบบบาง ส่วนที่กว้างขึ้นจะกลายเป็นแบบอัตโนมัติ) และแสดงคีย์เวิร์ดผลลัพธ์ถัดจากข้อมูลที่คุณป้อน แทนที่จะสร้างผลลัพธ์ Firefox ที่สมบูรณ์แบบด้วยพิกเซลปลอมซึ่งไม่มีอยู่จริง Firefox ยังไม่มีวิธีในการตั้งค่าสีโฮเวอร์แยกกัน รัศมีขอบนิ้วหัวแม่มืออิสระ หรือสีของแทร็กที่ไม่ใช่แค่ค่าที่สองของสีแถบเลื่อน - สิ่งเหล่านี้เป็นข้อจำกัดถาวรที่แท้จริงของแพลตฟอร์ม ไม่ใช่การละเว้นในเครื่องมือนี้

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