ปรับแต่งสีและขนาดของแถบเลื่อน จากนั้นคัดลอก CSS
กำลังโหลดเครื่องมือ…
แถบเลื่อนเบราว์เซอร์เริ่มต้นไม่ตรงกับการออกแบบของคุณเสมอไป เครื่องมือปรับแต่งแถบเลื่อนของ Dokall ช่วยให้คุณสามารถเลือกแทร็กและสีนิ้วหัวแม่มือ กำหนดความกว้าง และดูตัวอย่างผลลัพธ์แบบเรียลไทม์ก่อนที่จะคัดลอก CSS
CSS ที่สร้างขึ้นมีทั้งกฎที่เข้ากันได้กับ WebKit และ Firefox วางตัวอย่างข้อมูลลงในสไตล์ชีตของคุณเพื่อรับประสบการณ์การเลื่อนที่สวยงามตามแบรนด์
body {
--sb-track-color: #232E33;
--sb-thumb-color: #6BAF8D;
--sb-size: 14px;
scrollbar-width: thin;
scrollbar-color: #6BAF8D #232E33;
}
body::-webkit-scrollbar {
width: var(--sb-size);
height: var(--sb-size);
}
body::-webkit-scrollbar-track {
background: var(--sb-track-color);
border-radius: 3px;
}
body::-webkit-scrollbar-thumb {
background: var(--sb-thumb-color);
border-radius: 3px;
}