ในบทความนี้เราจะดำดิ่งสู่โลกของแถบเลื่อน ฉันรู้ มันไม่ได้ฟังดูหรูหราเกินไป แต่เชื่อฉันเถอะ หน้าที่ออกแบบมาอย่างดีนั้นเข้ากันได้ดีกับแถบเลื่อนที่เข้าชุดกัน แถบเลื่อนโครเมียมแบบเก่านั้นไม่พอดีกันมากนัก
เราจะดูรายละเอียดที่สำคัญของแถบเลื่อนแล้วดูตัวอย่างที่น่าสนใจ
ส่วนประกอบของแถบเลื่อน
นี่เป็นการทบทวนมากขึ้นจริงๆ มี โพสต์มากมายที่นี่ใน CSS-Tricks ที่ลงรายละเอียดอย่างลึกซึ้งเมื่อพูดถึงการกำหนดสไตล์แถบเลื่อนแบบกำหนดเองใน CSS
ในการจัดรูปแบบแถบเลื่อน คุณต้องคุ้นเคยกับกายวิภาคของแถบเลื่อน ลองดูภาพประกอบนี้:
องค์ประกอบหลักสองประการที่ควรคำนึงถึงคือ:
- พื้นที่ ลู่ เป็นพื้นหลังใต้แถบ
- พื้นที่ นิ้วหัวแม่มือ เป็นส่วนที่ผู้ใช้คลิกและลากไปมา
เราสามารถเปลี่ยนคุณสมบัติของแถบเลื่อนทั้งหมดได้โดยใช้คำนำหน้าผู้ขาย::-webkit-scrollbar ตัวเลือก เราสามารถกำหนดความกว้างคงที่ของแถบเลื่อน สีพื้นหลัง มุมโค้งมน… ได้มากมาย! หากเรากำลังปรับแต่งแถบเลื่อนหลักของหน้า เราก็สามารถใช้ ::-webkit-scrollbar โดยตรงบนองค์ประกอบ HTML:
html::-webkit-scrollbar {
/* Style away! */
}หากเรากำลังปรับแต่งกล่องเลื่อนที่เป็นผลมาจาก overflow: scrollจากนั้นเราก็สามารถใช้ ::-webkit-scrollbar บนองค์ประกอบนั้นแทน:
.element::-webkit-scrollbar {
/* Style away! */
}ต่อไปนี้คือตัวอย่างสั้นๆ ที่จัดรูปแบบแถบเลื่อนขององค์ประกอบ HTML เพื่อให้กว้างและมีพื้นหลังสีแดง:
จะเป็นอย่างไรถ้าเราต้องการเปลี่ยนแค่นิ้วโป้งหรือแทร็กของแถบเลื่อน คุณเดาได้ - เรามีองค์ประกอบเทียมนำหน้าพิเศษสำหรับสองคนนี้: ::-webkit-scrollbar-thumb และ ::-webkit-scrollbar-trackตามลำดับ นี่คือแนวคิดของสิ่งที่เป็นไปได้เมื่อเรารวมสิ่งเหล่านี้เข้าด้วยกัน:
แปรงฟันพอ! ฉันต้องการแสดงสไตล์ของแถบเลื่อนแบบกำหนดเองสามองศา จากนั้นเปิดตัวอย่างขนาดใหญ่ที่ดึงมาจากเว็บเพื่อหาแรงบันดาลใจ
แถบเลื่อนที่เรียบง่ายและมีระดับ
แถบเลื่อนที่กำหนดเองยังคงมีอยู่ให้น้อยที่สุด ฉันรวบรวมกลุ่มตัวอย่างที่เปลี่ยนลักษณะที่ปรากฏอย่างละเอียด ไม่ว่าจะด้วยการเปลี่ยนสีเล็กน้อยที่นิ้วหัวแม่มือหรือแทร็ก หรือการจัดสไตล์แสงให้กับพื้นหลัง
อย่างที่คุณเห็น เราไม่ต้องคลั่งไคล้ในการจัดรูปแบบแถบเลื่อน บางครั้งการเปลี่ยนแปลงเล็กน้อยก็ใช้เพื่อยกระดับประสบการณ์ผู้ใช้โดยรวมด้วยแถบเลื่อนที่ตรงกับธีมโดยรวม
แถบเลื่อนที่สะดุดตา
แต่ยอมรับเถอะว่าการลงน้ำเล็กน้อยและฝึกความคิดสร้างสรรค์เป็นเรื่องสนุก ต่อไปนี้คือแถบเลื่อนที่แปลกและไม่เหมือนใครที่อาจ "มากเกินไป" ในบางกรณี แต่แน่นอนว่าสะดุดตา
อีกหนึ่ง…
แล้วเราใช้แถบเลื่อนเพื่อหมุนในรถไฟสำหรับนิ้วหัวแม่มือและแทร็กสำหรับลู่วิ่ง!
