mandatory และ proximity ต่างกันอย่างไร?

mandatory บังคับให้เบราว์เซอร์ snap ไปยังจุดที่ใกล้ที่สุดเสมอเมื่อหยุดเลื่อน ให้ความรู้สึกเหมือน carousel ที่สม่ำเสมอ proximity จะ snap เฉพาะเมื่อตำแหน่ง scroll อยู่ใกล้จุด snap แล้ว ปล่อยให้ผู้ใช้หยุดระหว่างจุดได้ แนะนำ mandatory สำหรับ carousel และ proximity สำหรับรายการยาว

scroll-snap-stop: always ทำหน้าที่อะไร?

scroll-snap-stop: always ป้องกันไม่ให้ผู้ใช้ข้ามจุด snap ได้มากกว่าหนึ่งจุดในการ flick เร็วครั้งเดียว มีประโยชน์สำหรับเนื้อหาแบ่งหน้าหรือขั้นตอนทีละขั้นที่ต้องการให้เห็นการ์ดทุกใบ ค่าเริ่มต้นคือ normal ซึ่งอนุญาตให้ข้ามได้

scroll-snap ใช้ได้บนมือถือไหม?

ได้ครับ scroll-snap รองรับทุกเบราว์เซอร์สมัยใหม่รวมถึง iOS Safari, Chrome Android, Firefox และ Edge โดยเฉพาะบนอุปกรณ์ touch จะลื่นไหลมาก ให้ประสบการณ์การปัดแบบ native เหมือนแอปโดยไม่ต้องใช้ไลบรารี JavaScript

ตัวสร้าง CSS Scroll-Snap

สร้าง scroll-snap-type และ scroll-snap-align แบบภาพ กำหนดแกน x/y ระดับ mandatory/proximity และ snap-stop พร้อมพรีวิวสด คัดลอก CSS พร้อมใช้ได้ทันที - ทำงานในเบราว์เซอร์ 100%

Loading tool...

ตัวสร้าง CSS Scroll-Snap คืออะไร?

ตัวสร้าง CSS Scroll-Snap เป็นเครื่องมือออนไลน์ฟรีที่สร้างกฎ CSS scroll-snap แบบ native สำหรับ carousel, image gallery และส่วนแบ่งหน้า กำหนดแกน snap (x, y หรือ both) เลือกความเข้มงวด mandatory หรือ proximity เลือกการจัดวาง child (start, center, end หรือ none) และเปิด scroll-snap-stop เพื่อควบคุมการ flick เร็วได้ พรีวิวที่เลื่อนได้ช่วยให้สัมผัสจุด snap ทันที และคลิกเดียวก็คัดลอก CSS พร้อมใช้ได้ ทำงานในเบราว์เซอร์ 100%

ประโยชน์หลัก

scroll-snapping แบบ native ของเบราว์เซอร์โดยไม่พึ่งพา JavaScript เลย
รองรับทั้งสามแกน (x, y, both) พร้อมระดับ mandatory และ proximity
scroll-snap-stop เพื่อป้องกันการข้ามเนื้อหาเมื่อ flick เร็ว ได้เลือกเพิ่มเติม
พรีวิวเลื่อนได้จริงเพื่อสัมผัสพฤติกรรม snap ก่อนคัดลอก
คัดลอก container และ child CSS ที่สะอาดพร้อมใช้งานได้คลิกเดียว

กรณีการใช้งาน

•นักพัฒนา front-end ที่สร้าง image carousel และ product gallery
•นักออกแบบที่ต้องการ UI แบบ swipe เหมือนแอปโดยไม่ใช้ไลบรารี JS slider
•ทีมที่พัฒนา onboarding แบ่งหน้าหรือขั้นตอนทีละขั้น
•นักการตลาดที่เพิ่มรายการรีวิวหรือโลโก้เลื่อนแนวนอน
•ผู้ที่ทำ prototype รูปแบบ navigation มือถือที่เป็นมิตรกับ touch

วิธีใช้ตัวสร้าง CSS Scroll-Snap

เลือกแกน snap: เลือก x สำหรับ carousel แนวนอน, y สำหรับรายการแนวตั้ง หรือ both สำหรับพื้นที่เลื่อนสองแกน
ตั้งค่า strictness และ alignment: เลือก mandatory (snap เสมอ) หรือ proximity (snap เมื่อใกล้) แล้วเลือกการจัดวาง child: start, center, end หรือ none
ปรับพรีวิว: ปรับจำนวนการ์ด ขนาด ระยะห่าง และ padding แล้วลากในกล่องพรีวิวเพื่อสัมผัสจุด snap
คัดลอก CSS: คลิก คัดลอก CSS เพื่อเก็บกฎ .scroll-container และ .scroll-child แบบเต็ม หรือกดรีเซ็ตเพื่อเริ่มใหม่

คุณสมบัติหลัก

โหมด snap แนวนอน (x), แนวตั้ง (y) และสองแกน (both) ในสวิตช์เดียว
ระดับความเข้มงวด mandatory และ proximity เพื่อปรับว่า snap แรงแค่ไหน
scroll-snap-align ต่อ child: start, center, end หรือ none
scroll-snap-stop (normal / always) เพื่อป้องกันการข้ามการ์ดเมื่อ flick เร็ว
พรีวิวเลื่อนได้จริง ปรับจำนวนการ์ด ขนาด ระยะห่าง และ padding ได้
คัดลอก container และ child CSS ที่สะอาดพร้อมใช้งานได้คลิกเดียว

คำถามที่พบบ่อย

คู่มือฉบับละเอียด

CSS Scroll Snap Generator: สร้าง Carousel ลื่น ๆ ด้วย CSS ล้วน ไม่ต้องพึ่ง JavaScript

อ่านคู่มือฉบับเต็ม →

ตัวสร้าง CSS Scroll-Snap

แกน Snap

ระดับความเข้มงวด

การจัดวาง Snap ของ Child

Snap Stop

จำนวนการ์ด: 5

ขนาดการ์ด: 180px

ระยะห่าง: 16px

Padding: 16px

พรีวิวสด

ลากภายในกรอบเพื่อเลื่อนและสัมผัสจุด snap

CSS ที่สร้างขึ้น

.scroll-container {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 16px;
  padding: 16px;
}

.scroll-child {
  scroll-snap-align: center;
  width: 180px;
  flex-shrink: 0;
}

Container CSS

.scroll-container {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 16px;
  padding: 16px;
}

เกี่ยวกับตัวสร้าง CSS Scroll-Snap

CSS scroll-snap ช่วยให้คุณสร้าง scroll container ที่ snap ไปยังจุดเฉพาะเมื่อผู้ใช้เลื่อน เหมาะสำหรับ image carousel, product gallery และส่วนแบ่งหน้า เครื่องมือนี้สร้าง scroll-snap-type declaration สำหรับ container และ scroll-snap-align declaration สำหรับ child element พร้อมพรีวิวที่ลากทดสอบได้

ทำไมต้องใช้ scroll-snap?

• สร้าง carousel และ gallery ที่ลื่นไหลเหมือนแอปโดยไม่ต้องใช้ JavaScript
• จุด snap ทำงานกับ touch, trackpad, mouse wheel และ keyboard
• scroll-snap-stop: always ป้องกันการข้ามเนื้อหาเมื่อ flick เร็ว
• ให้ UX ที่ดีกว่า slider JS แบบกำหนดเอง - เป็น native ประสิทธิภาพสูง และ accessible
• ตอบสนองเต็มที่: การ snap ปรับตัวตาม viewport ใดๆ อัตโนมัติ

คุณสมบัติ

• โหมด snap แนวนอน (x), แนวตั้ง (y) และสองแกน (both)
• ระดับความเข้มงวด mandatory และ proximity
• การจัดวาง child: start, center, end หรือ none
• scroll-snap-stop (normal / always) เพื่อควบคุมพฤติกรรม flick ได้เลือกเพิ่มเติม
• พรีวิวเลื่อนได้จริง ปรับจำนวนการ์ด ขนาด ระยะห่าง และ padding ได้

Loading tool...

ตัวสร้าง CSS Scroll-Snap คืออะไร?

ประโยชน์หลัก

scroll-snapping แบบ native ของเบราว์เซอร์โดยไม่พึ่งพา JavaScript เลย
รองรับทั้งสามแกน (x, y, both) พร้อมระดับ mandatory และ proximity
scroll-snap-stop เพื่อป้องกันการข้ามเนื้อหาเมื่อ flick เร็ว ได้เลือกเพิ่มเติม
พรีวิวเลื่อนได้จริงเพื่อสัมผัสพฤติกรรม snap ก่อนคัดลอก
คัดลอก container และ child CSS ที่สะอาดพร้อมใช้งานได้คลิกเดียว

กรณีการใช้งาน

•นักพัฒนา front-end ที่สร้าง image carousel และ product gallery
•นักออกแบบที่ต้องการ UI แบบ swipe เหมือนแอปโดยไม่ใช้ไลบรารี JS slider
•ทีมที่พัฒนา onboarding แบ่งหน้าหรือขั้นตอนทีละขั้น
•นักการตลาดที่เพิ่มรายการรีวิวหรือโลโก้เลื่อนแนวนอน
•ผู้ที่ทำ prototype รูปแบบ navigation มือถือที่เป็นมิตรกับ touch

วิธีใช้ตัวสร้าง CSS Scroll-Snap

เลือกแกน snap: เลือก x สำหรับ carousel แนวนอน, y สำหรับรายการแนวตั้ง หรือ both สำหรับพื้นที่เลื่อนสองแกน
ตั้งค่า strictness และ alignment: เลือก mandatory (snap เสมอ) หรือ proximity (snap เมื่อใกล้) แล้วเลือกการจัดวาง child: start, center, end หรือ none
ปรับพรีวิว: ปรับจำนวนการ์ด ขนาด ระยะห่าง และ padding แล้วลากในกล่องพรีวิวเพื่อสัมผัสจุด snap
คัดลอก CSS: คลิก คัดลอก CSS เพื่อเก็บกฎ .scroll-container และ .scroll-child แบบเต็ม หรือกดรีเซ็ตเพื่อเริ่มใหม่

คุณสมบัติหลัก

โหมด snap แนวนอน (x), แนวตั้ง (y) และสองแกน (both) ในสวิตช์เดียว
ระดับความเข้มงวด mandatory และ proximity เพื่อปรับว่า snap แรงแค่ไหน
scroll-snap-align ต่อ child: start, center, end หรือ none
scroll-snap-stop (normal / always) เพื่อป้องกันการข้ามการ์ดเมื่อ flick เร็ว
พรีวิวเลื่อนได้จริง ปรับจำนวนการ์ด ขนาด ระยะห่าง และ padding ได้
คัดลอก container และ child CSS ที่สะอาดพร้อมใช้งานได้คลิกเดียว

คำถามที่พบบ่อย

คู่มือฉบับละเอียด

CSS Scroll Snap Generator: สร้าง Carousel ลื่น ๆ ด้วย CSS ล้วน ไม่ต้องพึ่ง JavaScript

อ่านคู่มือฉบับเต็ม →

.scroll-container { display: flex; flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding: 16px; } .scroll-child { scroll-snap-align: center; width: 180px; flex-shrink: 0; }

เกี่ยวกับตัวสร้าง CSS Scroll-Snap

ทำไมต้องใช้ scroll-snap?

• สร้าง carousel และ gallery ที่ลื่นไหลเหมือนแอปโดยไม่ต้องใช้ JavaScript
• จุด snap ทำงานกับ touch, trackpad, mouse wheel และ keyboard
• scroll-snap-stop: always ป้องกันการข้ามเนื้อหาเมื่อ flick เร็ว
• ให้ UX ที่ดีกว่า slider JS แบบกำหนดเอง - เป็น native ประสิทธิภาพสูง และ accessible
• ตอบสนองเต็มที่: การ snap ปรับตัวตาม viewport ใดๆ อัตโนมัติ

คุณสมบัติ

• โหมด snap แนวนอน (x), แนวตั้ง (y) และสองแกน (both)
• ระดับความเข้มงวด mandatory และ proximity
• การจัดวาง child: start, center, end หรือ none
• scroll-snap-stop (normal / always) เพื่อควบคุมพฤติกรรม flick ได้เลือกเพิ่มเติม
• พรีวิวเลื่อนได้จริง ปรับจำนวนการ์ด ขนาด ระยะห่าง และ padding ได้

ตัวสร้าง CSS Scroll-Snap

ตัวสร้าง CSS Scroll-Snap คืออะไร?

ประโยชน์หลัก

กรณีการใช้งาน

วิธีใช้ตัวสร้าง CSS Scroll-Snap

คุณสมบัติหลัก

คำถามที่พบบ่อย

ตัวสร้างหมายเลขลอตเตอรี่

เครื่องมือทอยเหรียญ

ตัวสร้างคำสุ่ม

เครื่องมือสร้าง QR Code

เครื่องมือสร้าง Meme

ตัวสร้าง WiFi QR Code

ตัวสร้าง CSS Scroll-Snap

เกี่ยวกับตัวสร้าง CSS Scroll-Snap

ทำไมต้องใช้ scroll-snap?

คุณสมบัติ

ตัวสร้าง CSS Scroll-Snap คืออะไร?

ประโยชน์หลัก

กรณีการใช้งาน

วิธีใช้ตัวสร้าง CSS Scroll-Snap

คุณสมบัติหลัก

คำถามที่พบบ่อย

ตัวสร้างหมายเลขลอตเตอรี่

เครื่องมือทอยเหรียญ

ตัวสร้างคำสุ่ม

เครื่องมือสร้าง QR Code

เครื่องมือสร้าง Meme

ตัวสร้าง WiFi QR Code

เกี่ยวกับตัวสร้าง CSS Scroll-Snap

ทำไมต้องใช้ scroll-snap?

คุณสมบัติ

ตัวสร้าง CSS Scroll-Snap คืออะไร?

ประโยชน์หลัก

กรณีการใช้งาน

วิธีใช้ตัวสร้าง CSS Scroll-Snap

คุณสมบัติหลัก

คำถามที่พบบ่อย

CSS scroll-snap คืออะไร?

mandatory และ proximity ต่างกันอย่างไร?

scroll-snap-stop: always ทำหน้าที่อะไร?

scroll-snap ใช้ได้บนมือถือไหม?

เกี่ยวกับตัวสร้าง CSS Scroll-Snap

ทำไมต้องใช้ scroll-snap?

คุณสมบัติ

ตัวสร้าง CSS Scroll-Snap คืออะไร?

ประโยชน์หลัก

กรณีการใช้งาน

วิธีใช้ตัวสร้าง CSS Scroll-Snap

คุณสมบัติหลัก

คำถามที่พบบ่อย

CSS scroll-snap คืออะไร?

mandatory และ proximity ต่างกันอย่างไร?

scroll-snap-stop: always ทำหน้าที่อะไร?

scroll-snap ใช้ได้บนมือถือไหม?

เกี่ยวกับตัวสร้าง CSS Scroll-Snap

ทำไมต้องใช้ scroll-snap?

คุณสมบัติ