แก้ปัญหาเว็บไซต์เด้ง (Layout Shift) จาก Scrollbar แบบเข้าใจลึก

เวลาเปิด Mega Menu, Modal หรือ Dropdown แล้วหน้าเว็บทั้งหน้าขยับไปด้านข้างเล็กน้อย หลายคนอาจคิดว่าเป็นบั๊กของ CSS หรือ JavaScript แต่ความจริงแล้วต้นเหตุหลักมาจาก Scrollbar (แถบเลื่อนหน้าจอ) นั่นเอง

อาการนี้เรียกว่า Layout Shift จาก Scrollbar และเป็นปัญหาที่พบได้บ่อยมาก โดยเฉพาะบนระบบปฏิบัติการ Windows

🔍 ทำไม Scrollbar ถึงทำให้เว็บเด้ง?

บน Windows และบางเบราว์เซอร์ Scrollbar จะกิน “พื้นที่จริง” ของหน้าจอประมาณ 15–17px ต่างจาก macOS ที่มักเป็นแบบ overlay (ซ้อนทับเนื้อหา)

เมื่อ Scrollbar ปรากฏหรือหายไป ความกว้างของ Layout จะเปลี่ยนทันที ส่งผลให้ทุกองค์ประกอบในหน้าเว็บขยับตามไปด้วย

กลไกการเกิด Layout Shift

1️⃣ ก่อนเปิดเมนู

  • หน้าเว็บสั้น ไม่เกินความสูงหน้าจอ

  • ไม่มี Scrollbar

  • ความกว้างเนื้อหา = 100%

2️⃣ เมื่อเปิด Mega Menu หรือ Modal

  • ความสูงหน้าเว็บเพิ่มขึ้น

  • Scrollbar ปรากฏ

  • พื้นที่ 15–17px ถูกหักออกจาก Layout

  • ความกว้างกลายเป็น 100% - 17px

ผลลัพธ์คือ หน้าเว็บทั้งหน้าถูกดันไปทางซ้าย ทำให้ผู้ใช้รู้สึกว่าเว็บ “เด้ง”

3️⃣ เมื่อปิดเมนู

  • เนื้อหาสั้นลง

  • Scrollbar หายไป

  • ความกว้างกลับมา 100%

  • หน้าเว็บเด้งกลับอีกครั้ง

📊 ภาพรวมการเปลี่ยนแปลง

สถานะScrollbarความกว้างเนื้อหา
ก่อนเปิด❌ ไม่มี100%
เปิดเมนู✅ มี100% - 17px
ปิดเมนู❌ ไม่มี100%

✅ วิธีแก้ปัญหา

วิธีที่ 1: บังคับให้มี Scrollbar ตลอดเวลา

วิธีดั้งเดิมและรองรับทุกเบราว์เซอร์

 
body {  overflow-y: scroll; }

เมื่อ Scrollbar ถูกบังคับให้แสดงตลอด พื้นที่จะถูกจองไว้เสมอ ทำให้ Layout ไม่เปลี่ยน

ข้อดี

  • ใช้ได้กับทุก Browser

  • แก้ปัญหาได้แน่นอน

ข้อสังเกต

  • Scrollbar จะปรากฏแม้เนื้อหาจะสั้น

วิธีที่ 2: ใช้ scrollbar-gutter: stable

วิธีที่ทันสมัยกว่า โดยสำรองพื้นที่ไว้ล่วงหน้าโดยไม่ต้องแสดง Scrollbar ตลอดเวลา

 
html {  scrollbar-gutter: stable; }

คุณสมบัตินี้จะทำให้ Browser จองพื้นที่ Scrollbar ไว้เสมอ แม้ยังไม่ต้องแสดงจริง

ข้อดี

  • ดูสะอาดกว่า

  • Scrollbar แสดงเฉพาะเมื่อจำเป็น

  • ป้องกัน Layout Shift ได้

ข้อจำกัด

  • รองรับเฉพาะ Browser รุ่นใหม่

🎯 แนวทางที่แนะนำ

เพื่อให้รองรับได้ทุกกรณี ควรใช้ทั้งสองวิธีร่วมกัน

 
html {  scrollbar-gutter: stable; } body {  overflow-y: scroll; }

แนวทางนี้ช่วยให้:

  • หน้าเว็บนิ่ง ไม่ขยับ

  • รองรับทั้ง Browser เก่าและใหม่

  • UI ดูเสถียรและเป็นมืออาชีพ

📌 ทำไมเรื่องนี้สำคัญสำหรับนักพัฒนาเว็บ?

Layout Shift ส่งผลต่อ:

  • ความรู้สึกของผู้ใช้

  • ความน่าเชื่อถือของเว็บไซต์

  • Core Web Vitals (CLS)

  • ภาพลักษณ์ความเป็นมืออาชีพ

ปัญหานี้พบได้บ่อยใน:

  • Mega Menu

  • Modal

  • Dropdown

  • Sidebar

  • Popup

  • ระบบ Login Overlay

การแก้ปัญหา Scrollbar ตั้งแต่เริ่มต้นโปรเจกต์ คือรายละเอียดเล็ก ๆ ที่สร้างความแตกต่างอย่างชัดเจนระหว่างเว็บทั่วไปกับเว็บที่ออกแบบอย่างมืออาชีพ