Đặt mục tiêu cuộn cho lần kết xuất ban đầu

Tính năng web: scroll-initial-target scrollIntoView()

Thuộc tính CSS scroll-initial-target cung cấp một cách khai báo, chỉ dùng CSS để đưa một phần tử con cụ thể vào vùng hiển thị của vùng chứa cuộn ngay khi vùng chứa đó được kết xuất. Trước đây, nhà phát triển dựa vào JavaScript (Element.scrollIntoView()) hoặc giá trị nhận dạng phân mảnh URL (#item-id). Cả hai đều có hạn chế và khó triển khai.

Cách triển khai

Để triển khai thành công, hãy làm như sau:

  1. Đảm bảo có vùng chứa cuộn: Phần tử mục tiêu phải nằm trong vùng chứa cuộn (một phần tử có thuộc tính tràn cho phép cuộn, chẳng hạn như overflow: auto). Đây có thể là bất kỳ phần tử gốc nào, bao gồm cả phần tử gốc <html>.
  2. Nhắm đến mục: Áp dụng scroll-initial-target: nearest cho phần tử con cụ thể mà bạn muốn đưa vào khung hiển thị.

Mã ví dụ: Nguồn cấp dữ liệu đa phương tiện dọc

Trong ví dụ này, một nguồn cấp dữ liệu bắt đầu cuộn đến một mục "nổi bật" cụ thể thay vì ở đầu danh sách.

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

Triển khai chiến lược và các phương pháp hay nhất

  • NÊN sử dụng scroll-initial-target cho trải nghiệm "bắt đầu từ giữa", chẳng hạn như lịch bắt đầu vào ngày hiện tại hoặc thư viện bắt đầu bằng một hình ảnh cụ thể.
  • KHÔNG nhầm lẫn điều này với tiêu điểm hỗ trợ tiếp cận. Thuộc tính này chỉ di chuyển khung nhìn hình ảnh chứ không di chuyển tiêu điểm bàn phím. Bạn phải quản lý element.focus() theo cách thủ công nếu đích đến là điểm bắt đầu cho người dùng bàn phím.
  • KHÔNG sử dụng thuộc tính này nếu bạn cần ảnh động "cuộn" mượt mà khi tải; thuộc tính này là riêng biệt và đặt vị trí ngay lập tức trong giai đoạn bố cục.
  • KHÔNG đặt scroll-initial-target trên nhiều phần tử trong cùng một vùng chứa có thể cuộn. Nếu nhiều phần tử chỉ định scroll-initial-target: nearest, thì trình duyệt sẽ chọn phần tử xuất hiện đầu tiên theo thứ tự cây DOM.
  • NÊN cung cấp kích thước cho nội dung nghe nhìn. Vì vị trí cuộn được tính toán trong quá trình bố cục ban đầu, hãy đảm bảo hình ảnh hoặc video có aspect-ratio hoặc height/width cố định để ngăn mục tiêu dịch chuyển sau khi nội dung nghe nhìn tải.
  • NÊN tính đến Hệ thống phân cấp ưu tiên: Một phân mảnh của URL (ví dụ: example.com/#top) và thuộc tính scroll-start ở cấp vùng chứa đều được ưu tiên hơn scroll-initial-target.

Chiến lược dự phòng

Đối với những trình duyệt chưa hỗ trợ API này, hãy sử dụng phương án dự phòng JavaScript. Sử dụng sự kiện DOMContentLoaded để đảm bảo trình duyệt cuộn phần tử vào khung hiển thị ngay khi quá trình phân tích cú pháp HTML hoàn tất, mang lại trải nghiệm nhanh hơn so với việc chờ tất cả hình ảnh và tài nguyên tải xong. Ngoài ra, bạn cũng có thể đặt tập lệnh ở cuối phần tử <body> và không cần trình nghe sự kiện.

/**
 * 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" });
    }
  }
});