scroll-snap-type และ scroll-snap-align
สร้างประสบการณ์การเลื่อนแบบภาพหมุนและการแบ่งหน้าโดยใช้คุณสมบัติ CSS สำหรับการสแนปการเลื่อน
scroll-snap-type และ scroll-snap-align เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
CSS Scroll Snap คืออะไร
CSS Scroll Snap ช่วยให้คอนเทนเนอร์ที่เลื่อนได้ “หยุดเข้าตำแหน่ง” ที่กำหนดหลังการเลื่อน ทำให้สร้างพฤติกรรมการแบ่งหน้าและแกลเลอรีแบบเลื่อนได้อย่างควบคุม โดยไม่ต้องใช้ JavaScript
scroll-snap-type บนคอนเทนเนอร์
เปิดใช้การหยุดเข้าตำแหน่งบนคอนเทนเนอร์ที่เลื่อนได้:
<div class="carousel">
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
</div>ค่าของ scroll-snap-type
มีสองส่วน:
- แกน:
x,yหรือboth - ความเคร่งครัด:
mandatory(หยุดเข้าตำแหน่งเสมอ) หรือproximity(หยุดเข้าตำแหน่งเมื่ออยู่ใกล้จุดหยุด)
<div class="paged">Paged container</div>
<div class="freeform">Freeform container</div>scroll-snap-align บนรายการ
กำหนดตำแหน่งที่ลูกแต่ละรายการจะหยุดเข้าตำแหน่งภายในคอนเทนเนอร์:
<div class="carousel-demo">
<div class="carousel-item">1</div><div class="carousel-item">2</div>
</div>การหยุดเข้าตำแหน่งสำหรับหน้าเต็มจอ
เค้าโครงส่วนแบบเต็มจอที่แบ่งหน้าในแนวตั้ง:
<div class="sections">
<div class="section">Section 1</div><div class="section">Section 2</div>
</div>การหยุดเข้าตำแหน่งสำหรับแกลเลอรีแนวนอน
แกลเลอรีการ์ดแนวนอนที่หยุดเข้าตำแหน่ง:
<div class="carousel">
<div class="card">Card 1</div><div class="card">Card 2</div><div class="card">Card 3</div>
</div>scroll-snap-stop
scroll-snap-stop: always ป้องกันไม่ให้การเลื่อนเร็วข้ามจุดหยุด ผู้ใช้จะข้ามไปข้างหน้าได้ไม่เกินหนึ่งรายการต่อการเลื่อนหนึ่งครั้ง
<div class="slider">
<div class="slide">1</div><div class="slide">2</div>
</div>scroll-snap-margin และ scroll-padding
เพิ่มระยะเยื้องให้ตำแหน่งหยุดบนรายการ (scroll-margin) หรือบนคอนเทนเนอร์ (scroll-padding):
<div class="carousel">Carousel container</div>overscroll-behavior
overscroll-behavior: contain ป้องกันการส่งต่อการเลื่อน — เมื่อคอนเทนเนอร์ถึงขอบเขตการเลื่อนแล้ว หน้าเว็บจะไม่เลื่อนไปด้วย:
<div class="modal-body">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>ข้อควรพิจารณาด้านการเข้าถึง
แกลเลอรีแบบหยุดเข้าตำแหน่งควรยังใช้งานผ่านแป้นพิมพ์ได้ ปุ่มลูกศรควรเลื่อนไประหว่างจุดหยุด เพิ่มบทบาทและป้ายกำกับแกลเลอรีของ ARIA การเลื่อนโดยโปรแกรมผ่าน JavaScript ควรเคารพจุดหยุดเดียวกัน
แกลเลอรี CSS เทียบกับ JS
CSS Scroll Snap รองรับความต้องการพื้นฐานส่วนใหญ่ของแกลเลอรีโดยไม่ต้องใช้ JavaScript เช่น การหยุดเข้าตำแหน่ง การซ่อนแถบเลื่อน และการจัดแนวด้วยระยะ内ใน ใช้ไลบรารี JS เมื่อจำเป็นต้องมีตัวบ่งชี้แบบจุด ปุ่มก่อนหน้า/ถัดไปพร้อมการเปลี่ยนภาพแบบเคลื่อนไหว หรือการจัดการการเข้าถึงที่ซับซ้อน
ตรวจสอบอย่างรวดเร็ว
สรุปทบทวน
CSS Scroll Snap สร้างพฤติกรรมการแบ่งหน้าและแกลเลอรีแบบเลื่อน กำหนด scroll-snap-type: x mandatory บนคอนเทนเนอร์ และ scroll-snap-align: start บนรายการ ใช้ scroll-snap-stop: always เพื่อป้องกันการข้ามจุดหยุด ใช้ร่วมกับ overscroll-behavior: contain เพื่อป้องกันการส่งต่อการเลื่อน ซ่อนแถบเลื่อนด้วย scrollbar-width: none เพื่อให้ภาพรวมดูสะอาด
คำถามที่พบบ่อย
บทเรียน “scroll-snap-type และ scroll-snap-align” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “scroll-snap-type และ scroll-snap-align” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “scroll-snap-type และ scroll-snap-align”
สร้างประสบการณ์การเลื่อนแบบภาพหมุนและการแบ่งหน้าโดยใช้คุณสมบัติ CSS สำหรับการสแนปการเลื่อน คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “scroll-snap-type และ scroll-snap-align” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- overflow: hidden scroll auto clip
- scroll-behavior: smooth
- scroll-snap-type และ scroll-snap-align
- การจัดรูปแบบแถบเลื่อนด้วย ::-webkit-scrollbar