การจัดรูปแบบแถบเลื่อนด้วย ::-webkit-scrollbar
ปรับแต่งลักษณะของแถบเลื่อนด้วยองค์ประกอบเสมือนของ webkit และคุณสมบัติ scrollbar-color
การจัดรูปแบบแถบเลื่อนด้วย ::-webkit-scrollbar เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
ภาพรวมการปรับแต่งแถบเลื่อน
เบราว์เซอร์แสดงแถบเลื่อนเริ่มต้นที่แตกต่างกันไปตามระบบปฏิบัติการ CSS อนุญาตให้ปรับแต่งลักษณะของแถบเลื่อนโดยใช้องค์ประกอบเสมือนของ WebKit ที่ไม่เป็นมาตรฐานและคุณสมบัติมาตรฐานสมัยใหม่
::-webkit-scrollbar
องค์ประกอบเสมือนรากของแถบเลื่อนทั้งหมด กำหนดความกว้างสำหรับแนวตั้งและความสูงสำหรับแนวนอน:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>::-webkit-scrollbar-track
รางคือช่องพื้นหลังที่ตัวเลื่อนเลื่อนไปตาม:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>::-webkit-scrollbar-thumb
ตัวเลื่อนคือเครื่องหมายแสดงตำแหน่งการเลื่อนที่ลากได้:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>การสร้างแถบเลื่อนแบบกำหนดเองอย่างสมบูรณ์
การใช้งานแถบเลื่อนแบบกำหนดเองอย่างสมบูรณ์:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>มาตรฐานสมัยใหม่: scrollbar-color
scrollbar-color เป็นคุณสมบัติมาตรฐานที่ Firefox รองรับ ใช้กำหนดสีของตัวเลื่อนและรางในการประกาศครั้งเดียว:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>มาตรฐานสมัยใหม่: scrollbar-width
scrollbar-width ควบคุมขนาดแถบเลื่อนด้วยค่าคำสำคัญ:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>การปรับแต่งแถบเลื่อนข้ามเบราว์เซอร์
หากต้องการรองรับเบราว์เซอร์อย่างครอบคลุม ให้ใช้ทั้งสองแนวทาง:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>ซ่อนแถบเลื่อนแต่ยังคงการเลื่อนไว้
ทำให้องค์ประกอบเลื่อนได้ แต่ซ่อนแถบเลื่อนทางภาพ:
<div class="hide-scrollbar">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>แถบเลื่อนในโหมดมืด
ใช้คุณสมบัติ CSS color-scheme เพื่อรับแถบเลื่อนโหมดมืดแบบดั้งเดิมของระบบปฏิบัติการโดยไม่ต้องปรับแต่งเอง:
<p>Uses OS-native scrollbar theme via <code>color-scheme</code>.</p>คำเตือนด้านการเข้าถึง
อย่าทำให้แถบเล็กเกินไปหรือมองไม่เห็นจนทำให้ค้นพบวิธีเลื่อนได้ยาก แถบเลื่อนที่ซ่อนอยู่เหมาะสำหรับการออกแบบที่เน้นการสัมผัสเป็นหลัก แต่อาจทำให้สับสนบนเดสก์ท็อป
ตรวจสอบอย่างรวดเร็ว
คุณสมบัติ CSS มาตรฐานใดใช้กำหนดสีของแถบเลื่อนและได้รับการรองรับใน Firefox
สรุปทบทวน
ปรับแต่งแถบเลื่อนด้วยองค์ประกอบเสมือน ::-webkit-scrollbar (WebKit) และคุณสมบัติมาตรฐาน scrollbar-color/scrollbar-width (Firefox/เบราว์เซอร์สมัยใหม่) ใช้ทั้งสองแนวทางเพื่อให้รองรับเบราว์เซอร์ต่าง ๆ อย่างครอบคลุม ใช้ scrollbar-width: none ร่วมกับส่วนเทียบเท่าของ WebKit เพื่อซ่อนแถบเลื่อนแต่ยังคงความสามารถในการเลื่อนไว้
คำถามที่พบบ่อย
บทเรียน “การจัดรูปแบบแถบเลื่อนด้วย ::-webkit-scrollbar” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การจัดรูปแบบแถบเลื่อนด้วย ::-webkit-scrollbar” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การจัดรูปแบบแถบเลื่อนด้วย ::-webkit-scrollbar”
ปรับแต่งลักษณะของแถบเลื่อนด้วยองค์ประกอบเสมือนของ webkit และคุณสมบัติ scrollbar-color คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การจัดรูปแบบแถบเลื่อนด้วย ::-webkit-scrollbar” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- overflow: hidden scroll auto clip
- scroll-behavior: smooth
- scroll-snap-type และ scroll-snap-align
- การจัดรูปแบบแถบเลื่อนด้วย ::-webkit-scrollbar