scroll-behavior: smooth
เปิดใช้การเลื่อนอย่างราบรื่นสำหรับลิงก์จุดยึดและการเลื่อนโดยโปรแกรมด้วย scroll-behavior
scroll-behavior: smooth เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
scroll-behavior คืออะไร
scroll-behavior ควบคุมว่าการเลื่อนที่เกิดจากการนำทาง เช่น ลิงก์จุดยึดและ JavaScript scrollTo() ควรเคลื่อนไหวอย่างนุ่มนวลหรือกระโดดไปทันที
scroll-behavior: smooth
การตั้งค่า scroll-behavior: smooth ให้กับองค์ประกอบ html หรือ body จะทำให้การนำทางไปยังลิงก์จุดยึดของหน้าเว็บทั้งหมดเคลื่อนไหวอย่างนุ่มนวล:
<p>Scrolling on this page is smooth thanks to <code>html { scroll-behavior: smooth; }</code>.</p>ทันทีเทียบกับนุ่มนวล
ค่า:
auto(ค่าเริ่มต้น): กระโดดไปทันทีsmooth: เลื่อนไปยังเป้าหมายพร้อมภาพเคลื่อนไหว
การนำทางด้วยลิงก์จุดยึด
เมื่อเปิดใช้การเลื่อนแบบนุ่มนวล การคลิกลิงก์อย่าง <a href="#contact"> จะเลื่อนไปยังองค์ประกอบที่มี id="contact" อย่างนุ่มนวล แทนที่จะกระโดดไปทันที
<nav>
<a href="#about">About</a>
<a href="#work">Work</a>
<a href="#contact">Contact</a>
</nav>
<section id="about"><h3>About</h3></section>
<section id="work"><h3>Work</h3></section>
<section id="contact"><h3>Contact</h3></section>JavaScript scrollTo() พร้อมการเลื่อนแบบนุ่มนวล
ส่ง behavior: "smooth" ให้กับเมธอดการเลื่อนของ JavaScript เพื่อให้การเลื่อนมีภาพเคลื่อนไหว:
<pre class="snippet">window.scrollTo({ top: 0, behavior: 'smooth' });
document.querySelector('#section').scrollIntoView({
behavior: 'smooth',
block: 'start'
});</pre>การโต้ตอบกับ prefers-reduced-motion
การเลื่อนแบบนุ่มนวลอาจทำให้เกิดอาการเมารถหรือเวียนศีรษะ ควรปิดใช้เสมอสำหรับผู้ใช้ที่ต้องการลดการเคลื่อนไหว:
<p>Respects <code>prefers-reduced-motion</code>.</p>scroll-behavior กับคอนเทนเนอร์
นำไปใช้กับคอนเทนเนอร์ใด ๆ ที่เลื่อนได้ ไม่ใช่เฉพาะหน้าเว็บ:
<div class="tabs-panel">
<div class="tab">Tab 1</div><div class="tab">Tab 2</div><div class="tab">Tab 3</div>
</div>ข้อจำกัด
CSS scroll-behavior ไม่สามารถควบคุมระยะเวลาการเลื่อนหรือฟังก์ชันการผ่อนความเร็วได้ หากต้องการควบคุมภาพเคลื่อนไหวอย่างละเอียด ให้ใช้ Web Animations API ของ JavaScript หรือไลบรารีอย่าง GSAP ที่มีปลั๊กอินสำหรับการเลื่อน
scroll-padding-top สำหรับส่วนหัวแบบคงที่
เมื่อส่วนหัวแบบคงที่ทับเป้าหมายของลิงก์จุดยึด scroll-padding-top จะเพิ่มระยะเยื้อง เพื่อไม่ให้เป้าหมายถูกซ่อนไว้ด้านหลังส่วนหัว:
<p>Anchor targets offset by fixed header height.</p>scroll-margin เทียบกับ scroll-padding
scroll-margin เพิ่มระยะเยื้องโดยตรงที่องค์ประกอบเป้าหมาย ส่วน scroll-padding เพิ่มระยะเยื้องให้กับคอนเทนเนอร์การเลื่อน ทั้งสองวิธีแก้ปัญหาส่วนหัวแบบคงที่ได้:
<div class="section">Section content</div>หมายเหตุด้านการเข้าถึง
การเลื่อนแบบนุ่มนวลเป็นการปรับปรุงประสบการณ์ผู้ใช้ ควรตรวจสอบให้การนำทางด้วยลิงก์จุดยึดยังทำงานได้แม้ไม่ได้เปิดใช้สิ่งนี้ — อย่าพึ่งพาพฤติกรรมการเลื่อนแบบนุ่มนวลสำหรับการทำงาน แต่ให้ใช้เพื่อปรับความสวยงามทางภาพเท่านั้น
ตรวจสอบอย่างรวดเร็ว
คุณจะทำให้ภาพเคลื่อนไหวของการเลื่อนแบบนุ่มนวลปิดใช้สำหรับผู้ใช้ที่ไวต่อการเคลื่อนไหวของระบบการทรงตัวได้อย่างไร
สรุปทบทวน
scroll-behavior: smooth บน html จะเปิดใช้การเลื่อนแบบมีภาพเคลื่อนไหวอย่างนุ่มนวลสำหรับลิงก์จุดยึดและเมธอดการเลื่อนของ JavaScript ใช้ scroll-padding-top เพื่อเยื้องเป้าหมายการเลื่อนให้พ้นจากส่วนหัวแบบคงที่ ควรปิดใช้การเลื่อนแบบนุ่มนวลภายในมีเดียคิวรี prefers-reduced-motion: reduce เพื่อการเข้าถึงเสมอ
คำถามที่พบบ่อย
บทเรียน “scroll-behavior: smooth” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “scroll-behavior: smooth” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “scroll-behavior: smooth”
เปิดใช้การเลื่อนอย่างราบรื่นสำหรับลิงก์จุดยึดและการเลื่อนโดยโปรแกรมด้วย scroll-behavior คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “scroll-behavior: smooth” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- overflow: hidden scroll auto clip
- scroll-behavior: smooth
- scroll-snap-type และ scroll-snap-align
- การจัดรูปแบบแถบเลื่อนด้วย ::-webkit-scrollbar