M

MLOG

ไทย

ควบคุม CSS scroll-behavior เพื่อการนำทางที่ราบรื่นและเข้าถึงได้ เรียนรู้เทคนิคการใช้งาน ความเข้ากันได้ของเบราว์เซอร์ และตัวเลือกการปรับแต่งขั้นสูงเพื่อประสบการณ์การใช้งานที่ไร้รอยต่อ

CSS Scroll Behavior: คู่มือฉบับสมบูรณ์เพื่อการเลื่อนที่ราบรื่น

ในภูมิทัศน์การพัฒนาเว็บในปัจจุบัน ประสบการณ์ผู้ใช้ (UX) ครองอำนาจสูงสุด รายละเอียดเล็กๆ น้อยๆ ที่ดูเหมือนเล็กน้อยแต่สามารถส่งผลกระทบอย่างมากต่อ UX คือความราบรื่นของการเลื่อน ไม่มีการกระโดดอย่างกะทันหันระหว่างส่วนต่างๆ อีกต่อไป! คุณสมบัติ scroll-behavior ของ CSS นำเสนอวิธีที่ง่ายแต่ทรงพลังในการนำการเลื่อนที่ราบรื่นไปใช้ ปรับปรุงการเข้าถึงเว็บไซต์และความพึงพอใจโดยรวมของผู้ใช้ คู่มือนี้ให้การสำรวจที่ครอบคลุมเกี่ยวกับ scroll-behavior ครอบคลุมทุกอย่างตั้งแต่การใช้งานพื้นฐานไปจนถึงการปรับแต่งขั้นสูงและข้อควรพิจารณาด้านความเข้ากันได้ของเบราว์เซอร์สำหรับผู้ชมทั่วโลกอย่างแท้จริง

CSS Scroll Behavior คืออะไร

คุณสมบัติ scroll-behavior ใน CSS ช่วยให้คุณระบุลักษณะการเลื่อนสำหรับกล่องเลื่อนได้ โดยค่าเริ่มต้น การเลื่อนเป็นไปในทันที ส่งผลให้เกิดการกระโดดอย่างกะทันหันเมื่อนำทางระหว่างส่วนต่างๆ ของหน้า scroll-behavior: smooth; จะเปลี่ยนสิ่งนี้ โดยให้การเปลี่ยนภาพแบบภาพเคลื่อนไหวที่ราบรื่นเมื่อมีการทริกเกอร์การเลื่อน ไม่ว่าจะโดยการคลิกลิงก์ Anchor การใช้ปุ่มลูกศร หรือการเริ่มต้นการเลื่อนโดยทางโปรแกรม

การใช้งานพื้นฐานของ scroll-behavior: smooth;

วิธีที่ง่ายที่สุดในการเปิดใช้งานการเลื่อนที่ราบรื่นคือการใช้คุณสมบัติ scroll-behavior: smooth; กับองค์ประกอบ html หรือ body วิธีนี้ทำให้การเลื่อนทั้งหมดภายใน Viewport ราบรื่น

การนำไปใช้กับองค์ประกอบ html:

โดยทั่วไปนี่เป็นวิธีที่ต้องการเนื่องจากมีผลต่อลักษณะการเลื่อนของทั้งหน้า

html {
  scroll-behavior: smooth;
}

การนำไปใช้กับองค์ประกอบ body:

วิธีนี้ก็ใช้ได้เช่นกัน แต่ไม่ค่อยพบเพราะมีผลเฉพาะเนื้อหาภายใน body เท่านั้น

body {
  scroll-behavior: smooth;
}

ตัวอย่าง: ลองจินตนาการถึงหน้าเว็บง่ายๆ ที่มีหลายส่วนที่ระบุโดยส่วนหัว เมื่อผู้ใช้คลิกที่ลิงก์นำทางที่ชี้ไปยังส่วนใดส่วนหนึ่งเหล่านี้ แทนที่จะกระโดดไปยังส่วนนั้นทันที หน้าจะเลื่อนไปยังส่วนนั้นอย่างราบรื่น

การเลื่อนที่ราบรื่นด้วย Anchor Links

Anchor Links (หรือที่เรียกว่า Fragment Identifiers) เป็นวิธีทั่วไปในการนำทางภายในหน้าเว็บ โดยทั่วไปจะใช้ในสารบัญหรือเว็บไซต์หน้าเดียว ด้วย scroll-behavior: smooth; การคลิกลิงก์ Anchor จะทริกเกอร์ภาพเคลื่อนไหวการเลื่อนที่ราบรื่น

โครงสร้าง HTML สำหรับ Anchor Links:





  
Section 1

  
Content of section 1...






  
Section 2

  
Content of section 2...






  
Section 3

  
Content of section 3...

ด้วยกฎ CSS html { scroll-behavior: smooth; } ในตำแหน่ง การคลิกที่ลิงก์ใดๆ ในการนำทางจะส่งผลให้เกิดภาพเคลื่อนไหวการเลื่อนที่ราบรื่นไปยังส่วนที่สอดคล้องกัน

การกำหนดเป้าหมายองค์ประกอบที่เลื่อนได้โดยเฉพาะ

คุณยังสามารถใช้ scroll-behavior: smooth; กับองค์ประกอบที่เลื่อนได้โดยเฉพาะ เช่น divs ที่มี overflow: auto; หรือ overflow: scroll; วิธีนี้ช่วยให้คุณเปิดใช้งานการเลื่อนที่ราบรื่นภายในคอนเทนเนอร์เฉพาะโดยไม่ส่งผลกระทบต่อส่วนอื่นๆ ของหน้า

ตัวอย่าง: การเลื่อนที่ราบรื่นใน Div:


  
Lots of content here...

  
More content...

  
Even more content...




.scrollable-container {
  width: 300px;
  height: 200px;
  overflow: scroll;
  scroll-behavior: smooth;
}

ในตัวอย่างนี้ เฉพาะเนื้อหาภายใน .scrollable-container เท่านั้นที่จะเลื่อนอย่างราบรื่น

การเลื่อนที่ราบรื่นแบบ Programmatic ด้วย JavaScript

ในขณะที่ scroll-behavior: smooth; จัดการการเลื่อนที่ทริกเกอร์โดยการโต้ตอบของผู้ใช้ (เช่น การคลิกลิงก์ Anchor) คุณอาจต้องเริ่มต้นการเลื่อนโดยทางโปรแกรมโดยใช้ JavaScript เมธอด scrollTo() และ scrollBy() เมื่อรวมกับตัวเลือก behavior: 'smooth' จะเป็นวิธีในการบรรลุเป้าหมายนี้

การใช้ scrollTo():

เมธอด scrollTo() จะเลื่อนหน้าต่างไปยังพิกัดเฉพาะ

window.scrollTo({
  top: 500,
  left: 0,
  behavior: 'smooth'
});

โค้ดนี้จะเลื่อนหน้าต่างอย่างราบรื่นไปยัง Vertical Offset 500 พิกเซลจากด้านบน

การใช้ scrollBy():

เมธอด scrollBy() จะเลื่อนหน้าต่างตามจำนวนที่ระบุ

window.scrollBy({
  top: 100,
  left: 0,
  behavior: 'smooth'
});

โค้ดนี้จะเลื่อนหน้าต่างลงอย่างราบรื่น 100 พิกเซล

ตัวอย่าง: การเลื่อนที่ราบรื่นไปยังองค์ประกอบเมื่อคลิกปุ่ม:





  
Section 3

  
Content of section 3...




const scrollButton = document.getElementById('scrollButton');
const section3 = document.getElementById('section3');

scrollButton.addEventListener('click', () => {
  section3.scrollIntoView({
    behavior: 'smooth'
  });
});

เมื่อคลิกปุ่ม หน้าจะเลื่อนไปยังองค์ประกอบ "Section 3" อย่างราบรื่นโดยใช้ scrollIntoView() เมธอดนี้มักจะถูกเลือกเนื่องจากคำนวณตำแหน่งที่แน่นอนขององค์ประกอบเป้าหมาย โดยไม่คำนึงถึงการเปลี่ยนแปลงเนื้อหาแบบไดนามิก

การปรับแต่งความเร็วในการเลื่อนและ Easing

ในขณะที่ scroll-behavior: smooth; ให้ภาพเคลื่อนไหวการเลื่อนที่ราบรื่นโดยค่าเริ่มต้น คุณไม่สามารถควบคุมความเร็วหรือ Easing (อัตราการเปลี่ยนแปลงของภาพเคลื่อนไหวเมื่อเวลาผ่านไป) ได้โดยตรงโดยใช้ CSS เพียงอย่างเดียว การปรับแต่งต้องใช้ JavaScript

ข้อควรจำ: ภาพเคลื่อนไหวที่ยาวหรือซับซ้อนเกินไปอาจเป็นอันตรายต่อ UX ซึ่งอาจทำให้เกิดอาการเมารถหรือขัดขวางการโต้ตอบของผู้ใช้ได้ มุ่งมั่นเพื่อภาพเคลื่อนไหวที่ละเอียดอ่อนและมีประสิทธิภาพ

การปรับแต่งตาม JavaScript:

หากต้องการปรับแต่งความเร็วในการเลื่อนและ Easing คุณต้องใช้ JavaScript เพื่อสร้างภาพเคลื่อนไหวแบบกำหนดเอง โดยทั่วไปแล้วจะเกี่ยวข้องกับการใช้ไลบรารีเช่น GSAP (GreenSock Animation Platform) หรือการใช้ตรรกะภาพเคลื่อนไหวของคุณเองโดยใช้ requestAnimationFrame

ตัวอย่างการใช้ requestAnimationFrame:

function smoothScroll(target, duration) {
  const start = window.pageYOffset;
  const targetPosition = target.getBoundingClientRect().top;
  const startTime = performance.now();

  function animation(currentTime) {
    const timeElapsed = currentTime - startTime;
    const run = ease(timeElapsed, start, targetPosition, duration);
    window.scrollTo(0, run);
    if (timeElapsed < duration) {
      requestAnimationFrame(animation);
    }
  }

  // Easing function (e.g., easeInOutQuad)
  function ease(t, b, c, d) {
    t /= d/2;
    if (t < 1) return c/2*t*t + b;
    t--;
    return -c/2 * (t*(t-2) - 1) + b;
  }

  requestAnimationFrame(animation);
}

// Example usage:
const targetElement = document.getElementById('section3');
const scrollDuration = 1000; // milliseconds
smoothScroll(targetElement, scrollDuration);

โค้ดนี้กำหนดฟังก์ชัน smoothScroll ที่ใช้องค์ประกอบเป้าหมายและระยะเวลาเป็นอินพุต ใช้ requestAnimationFrame เพื่อสร้างภาพเคลื่อนไหวที่ราบรื่นและมีฟังก์ชัน Easing (easeInOutQuad ในตัวอย่างนี้) เพื่อควบคุมจังหวะของภาพเคลื่อนไหว คุณสามารถค้นหาฟังก์ชัน Easing ที่แตกต่างกันมากมายทางออนไลน์เพื่อให้ได้เอฟเฟกต์ภาพเคลื่อนไหวที่หลากหลาย

ข้อควรพิจารณาด้านการเข้าถึง

แม้ว่าการเลื่อนที่ราบรื่นจะช่วยปรับปรุง UX ได้ แต่สิ่งสำคัญคือต้องพิจารณาถึงการเข้าถึง ผู้ใช้บางรายอาจพบว่าการเลื่อนที่ราบรื่นรบกวนสมาธิหรือทำให้สับสน การให้วิธีปิดใช้งานการเลื่อนที่ราบรื่นเป็นสิ่งสำคัญสำหรับความครอบคลุม

การใช้ค่ากำหนดของผู้ใช้:

แนวทางที่ดีที่สุดคือการเคารพค่ากำหนดของระบบปฏิบัติการของผู้ใช้สำหรับการลดการเคลื่อนไหว Media Queries เช่น prefers-reduced-motion ช่วยให้คุณตรวจจับได้ว่าผู้ใช้ได้ร้องขอการลดการเคลื่อนไหวในการตั้งค่าระบบหรือไม่

การใช้ prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important; /* Override smooth scrolling */
  }
}

โค้ดนี้จะปิดใช้งานการเลื่อนที่ราบรื่นหากผู้ใช้เปิดใช้งานการตั้งค่า "Reduce Motion" ในระบบปฏิบัติการ !important Flag ใช้เพื่อให้แน่ใจว่ากฎนี้จะแทนที่การประกาศ scroll-behavior อื่นๆ

การให้ Toggle แบบแมนนวล:

คุณยังสามารถให้ Toggle แบบแมนนวล (เช่น ช่องทำเครื่องหมาย) ที่ช่วยให้ผู้ใช้เปิดหรือปิดใช้งานการเลื่อนที่ราบรื่นได้ วิธีนี้ช่วยให้ผู้ใช้ควบคุมประสบการณ์ของตนได้โดยตรงมากขึ้น



const smoothScrollToggle = document.getElementById('smoothScrollToggle');

smoothScrollToggle.addEventListener('change', () => {
  if (smoothScrollToggle.checked) {
    document.documentElement.style.scrollBehavior = 'smooth';
  } else {
    document.documentElement.style.scrollBehavior = 'auto';
  }
});

โค้ดนี้เพิ่มช่องทำเครื่องหมายที่ช่วยให้ผู้ใช้ Toggle การเลื่อนที่ราบรื่นเปิดหรือปิดได้ อย่าลืมเก็บค่ากำหนดของผู้ใช้ (เช่น การใช้ Local Storage) เพื่อให้จดจำได้ในระหว่างเซสชัน

ความเข้ากันได้ของเบราว์เซอร์

scroll-behavior มีการรองรับเบราว์เซอร์ที่ดี แต่สิ่งสำคัญคือต้องตระหนักถึงเบราว์เซอร์รุ่นเก่าที่ไม่รองรับ นี่คือสรุปความเข้ากันได้ของเบราว์เซอร์:

การให้ Fallback สำหรับเบราว์เซอร์รุ่นเก่า:

สำหรับเบราว์เซอร์ที่ไม่รองรับ scroll-behavior คุณสามารถใช้ JavaScript Polyfill ได้ Polyfill คือโค้ดชิ้นหนึ่งที่ให้ฟังก์ชันการทำงานของคุณสมบัติใหม่กว่าในเบราว์เซอร์รุ่นเก่า

ตัวอย่าง: การใช้ Polyfill:

มีไลบรารี JavaScript หลายตัวที่ให้ Smooth Scrolling Polyfills ตัวเลือกหนึ่งคือการใช้ไลบรารีเช่น "Smoothscroll-polyfill"

โค้ดนี้รวมถึงไลบรารี "Smoothscroll-polyfill" และเริ่มต้น ฟังก์ชันนี้จะให้ฟังก์ชัน Smooth Scrolling ในเบราว์เซอร์รุ่นเก่าที่ไม่รองรับ scroll-behavior โดยกำเนิด

การโหลดแบบมีเงื่อนไข: พิจารณาการโหลด Polyfill แบบมีเงื่อนไขโดยใช้ Script Loader หรือ Feature Detection เพื่อหลีกเลี่ยงค่าใช้จ่ายที่ไม่จำเป็นในเบราว์เซอร์สมัยใหม่

แนวทางปฏิบัติที่ดีที่สุดสำหรับการเลื่อนที่ราบรื่น

นี่คือแนวทางปฏิบัติที่ดีที่สุดบางประการที่ควรคำนึงถึงเมื่อใช้ Smooth Scrolling:

ปัญหาทั่วไปและวิธีแก้ไข

นี่คือปัญหาทั่วไปบางประการที่คุณอาจพบเมื่อใช้ Smooth Scrolling และวิธีแก้ไข:

เทคนิคและข้อควรพิจารณาขั้นสูง

นอกเหนือจากพื้นฐานแล้ว ยังมีเทคนิคและข้อควรพิจารณาขั้นสูงหลายประการเพื่อปรับปรุงการใช้งาน Smooth Scrolling ของคุณ

การใช้ scroll-margin และ scroll-padding:

คุณสมบัติ CSS เหล่านี้ให้การควบคุมที่ละเอียดยิ่งขึ้นเกี่ยวกับลักษณะการ Snap การเลื่อนและช่วยหลีกเลี่ยงไม่ให้เนื้อหาถูกบดบังโดยส่วนหัวหรือส่วนท้ายคงที่

ตัวอย่าง:

section {
  scroll-margin-top: 20px; /* Adds a 20px margin above each section when scrolling */
}

html {
  scroll-padding-top: 60px; /* Adds 60px padding at the top of the viewport when scrolling */
}

การรวมกับ Intersection Observer API:

Intersection Observer API ช่วยให้คุณตรวจจับได้ว่าองค์ประกอบใดเข้าหรือออกจาก Viewport คุณสามารถใช้ API นี้เพื่อทริกเกอร์ภาพเคลื่อนไหว Smooth Scrolling ตามการมองเห็นขององค์ประกอบ

ตัวอย่าง:

const sections = document.querySelectorAll('section');

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Do something when the section is in view
      console.log('Section ' + entry.target.id + ' is in view');
    } else {
      // Do something when the section is out of view
      console.log('Section ' + entry.target.id + ' is out of view');
    }
  });
}, {
  threshold: 0.5 // Trigger when 50% of the element is visible
});

sections.forEach(section => {
  observer.observe(section);
});

โค้ดนี้ใช้ Intersection Observer API เพื่อตรวจจับว่าแต่ละส่วนเข้าหรือออกจาก Viewport จากนั้นคุณสามารถใช้ข้อมูลนี้เพื่อทริกเกอร์ภาพเคลื่อนไหว Smooth Scrolling แบบกำหนดเองหรือเอฟเฟกต์ภาพอื่นๆ

มุมมองระดับโลกเกี่ยวกับ Scroll Behavior

ในขณะที่การใช้งานทางเทคนิคของ Smooth Scrolling ยังคงสอดคล้องกันทั่วโลก ข้อควรพิจารณาด้านวัฒนธรรมและบริบทสามารถมีอิทธิพลต่อการใช้งานที่รับรู้ได้

บทสรุป

scroll-behavior: smooth; เป็นคุณสมบัติ CSS ที่มีค่าซึ่งสามารถปรับปรุงประสบการณ์ผู้ใช้ของเว็บไซต์ของคุณได้อย่างมาก การทำความเข้าใจการใช้งานพื้นฐาน ตัวเลือกการปรับแต่ง ข้อควรพิจารณาด้านการเข้าถึง และความเข้ากันได้ของเบราว์เซอร์ คุณสามารถสร้างประสบการณ์การเรียกดูที่ราบรื่นและสนุกสนานสำหรับผู้ใช้ทั่วโลก อย่าลืมจัดลำดับความสำคัญของการเข้าถึง เพิ่มประสิทธิภาพ และทดสอบอย่างละเอียดเพื่อให้แน่ใจว่าการใช้งาน Smooth Scrolling ของคุณตรงกับความต้องการของผู้ใช้ทั้งหมดของคุณ การทำตามแนวทางและแนวทางปฏิบัติที่ดีที่สุดที่ระบุไว้ในคู่มือนี้ คุณสามารถควบคุม Smooth Scrolling และสร้างเว็บไซต์ที่ทั้งสวยงามและเป็นมิตรกับผู้ใช้สำหรับผู้ชมทั่วโลก