ตั้งค่าเป้าหมายการเลื่อนสำหรับการแสดงผลครั้งแรก

พร็อพเพอร์ตี้ CSS scroll-initial-target มีวิธีประกาศที่ใช้ CSS เท่านั้นในการนำองค์ประกอบสืบทอดที่เฉพาะเจาะจงไปยังพื้นที่ที่มองเห็นได้ของคอนเทนเนอร์การเลื่อนทันทีที่แสดงผลคอนเทนเนอร์นั้น ก่อนหน้านี้ นักพัฒนาแอปต้องใช้ JavaScript (Element.scrollIntoView()) หรือตัวระบุส่วนย่อย URL (#item-id) ซึ่งทั้ง 2 วิธีมีข้อจำกัดและใช้งานได้ยาก

วิธีการนำไปใช้งาน

วิธีติดตั้งใช้งานให้สำเร็จ

1. ตรวจสอบว่ามีคอนเทนเนอร์การเลื่อน: องค์ประกอบเป้าหมายต้องอยู่ภายในคอนเทนเนอร์การเลื่อน (องค์ประกอบที่มีรายการเพิ่มเติมที่อนุญาตให้เลื่อนได้ เช่น overflow: auto) ซึ่งอาจเป็นองค์ประกอบระดับบนสุดใดก็ได้ รวมถึงองค์ประกอบ <html> ระดับรูท
2. กำหนดเป้าหมายรายการ: ใช้ scroll-initial-target: nearest กับองค์ประกอบสืบทอดที่เฉพาะเจาะจงซึ่งคุณต้องการแสดงในมุมมอง

โค้ดตัวอย่าง: ฟีดสื่อแนวตั้ง

ในตัวอย่างนี้ ฟีดจะเริ่มเลื่อนไปยังรายการ "แนะนำ" ที่เฉพาะเจาะจงแทนที่จะเป็นด้านบนสุดของรายการ

/** 
 * TARGET: The item that should be visible on initial load.
 */
.item.target {
  scroll-initial-target: nearest;
}

การนำไปใช้เชิงกลยุทธ์และแนวทางปฏิบัติแนะนำ

• ควรใช้ scroll-initial-target สำหรับประสบการณ์ "เริ่มต้นจากตรงกลาง" เช่น ปฏิทินที่เริ่มต้นในวันปัจจุบันหรือแกลเลอรีที่เริ่มต้นด้วยรูปภาพที่เฉพาะเจาะจง
• อย่าสับสนระหว่างการโฟกัสนี้กับการโฟกัสการช่วยเหลือพิเศษ พร็อพเพอร์ตี้นี้จะย้ายเฉพาะวิวพอร์ตภาพเท่านั้น โดยจะไม่ย้ายโฟกัสของแป้นพิมพ์ คุณต้องจัดการ element.focus() ด้วยตนเองหากต้องการให้เป้าหมายเป็นจุดเริ่มต้นสำหรับผู้ใช้แป้นพิมพ์
• อย่าใช้พร็อพเพอร์ตี้นี้หากต้องการภาพเคลื่อนไหว "การเลื่อน" ที่ราบรื่นเมื่อโหลด พร็อพเพอร์ตี้นี้ไม่ต่อเนื่องและจะตั้งค่าตำแหน่งทันทีในระหว่างระยะเลย์เอาต์
• อย่าตั้งค่า scroll-initial-target ในองค์ประกอบหลายรายการภายในคอนเทนเนอร์ที่เลื่อนได้เดียวกัน หากมีองค์ประกอบหลายรายการที่ระบุ scroll-initial-target: nearest เบราว์เซอร์จะเลือกองค์ประกอบที่ปรากฏเป็นอันดับแรกในลำดับแผนผัง DOM
• ควรระบุมิติข้อมูลสำหรับสื่อ เนื่องจากระบบจะคำนวณตำแหน่งการเลื่อนระหว่างเลย์เอาต์เริ่มต้น โปรดตรวจสอบว่ารูปภาพหรือวิดีโอมี aspect-ratio หรือ height/width คงที่เพื่อป้องกันไม่ให้เป้าหมายเลื่อนหลังจากที่สื่อโหลด
• ควรพิจารณาลำดับชั้นความสำคัญ: ส่วนย่อย URL (เช่น example.com/#top) และพร็อพเพอร์ตี้ scroll-start ระดับคอนเทนเนอร์มีความสำคัญเหนือกว่า scroll-initial-target

กลยุทธ์สำรอง

สำหรับเบราว์เซอร์ที่ยังไม่รองรับ API ให้ใช้ JavaScript สำรอง ใช้เหตุการณ์ DOMContentLoaded เพื่อให้เบราว์เซอร์เลื่อนองค์ประกอบให้อยู่ในมุมมองทันทีที่การแยกวิเคราะห์ HTML เสร็จสมบูรณ์ ซึ่งจะช่วยให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่รวดเร็วกว่าการรอให้รูปภาพและทรัพยากรทั้งหมดโหลดเสร็จ หรือจะวางสคริปต์ไว้ที่ท้ายองค์ประกอบ <body> ก็ได้เช่นกัน และไม่จำเป็นต้องใช้ Listener เหตุการณ์

/**
 * Progressive Enhancement Fallback
 */
document.addEventListener("DOMContentLoaded", () => {
  // Check for native CSS support
  if (!CSS.supports("scroll-initial-target", "nearest")) {
    const feedTarget = document.querySelector(".item.target");
    if (feedTarget) {
      // 'block: center' ensures the featured media is centered in view
      feedTarget.scrollIntoView({ behavior: "instant", block: "center" });
    }
  }
});