คุณสมบัติ scroll-behavior ใช้กำหนดพฤติกรรมการเลื่อนหน้าจอ (scrolling) ให้ตั้งค่าค่าต่างๆ ได้ดังนี้:
scroll-behavior: auto | smooth | initial | inherit;
ตัวอย่าง: Smooth Scrolling
ตัวอย่างการใช้งาน scroll-behavior เพื่อให้การเลื่อนหน้าจอเป็นแบบนุ่มนวล (smooth)
<!DOCTYPE html> <html> <head> <style> html { scroll-behavior: smooth; } #area1 { height: 400px; background-color: red; } #area2 { height: 600px; background-color: orange; } #area3 { height: 550px; background-color: magenta; } </style> </head> <body> <h1>Demo Heading</h1> <div class="main" id="area1"> <h2>Section 1</h2> <a href="#area2">Reach Section 2</a> </div> <div class="main" id="area2"> <h2>Section 2</h2> <a href="#area3">Reach Section 3</a> </div> <div class="main" id="area3"> <h2>Section 3</h2> <a href="#area1">Reach Section 1</a> </div> </body> </html>
ผลลัพธ์
คลิก "Reach Section 2" - จะเลื่อนไป Section 2 แบบนุ่มนวล
คลิก "Reach Section 3" - จะเลื่อนไป Section 3 แบบนุ่มนวล
คำอธิบายค่า
- auto - เลื่อนทันที (ค่าเริ่มต้น)
- smooth - เลื่อนแบบนุ่มนวล พร้อมแอนิเมชัน
- initial - ใช้ค่าเริ่มต้น
- inherit - สืบทอดจากองค์ประกอบพ่อ
การรองรับเบราว์เซอร์: รองรับในเบราว์เซอร์สมัยใหม่ทั้งหมด ยกเว้น Internet Explorer
