M

MLOG

Tiếng Việt

Tìm hiểu cách CSS scroll anchoring ngăn chặn tình trạng nhảy nội dung, cải thiện trải nghiệm người dùng trên các trang web động. Khám phá các ví dụ và phương pháp tốt nhất để điều hướng liền mạch.

CSS Scroll Anchoring: Ngăn Chặn Tình Trạng Nhảy Nội Dung để Mang Lại Trải Nghiệm Người Dùng Mượt Mà Hơn

Bạn đã bao giờ đang đọc một bài báo trực tuyến thì đột nhiên trang bị nhảy, khiến bạn mất vị trí đang đọc và phải cuộn xuống lại chưa? Trải nghiệm khó chịu này, được gọi là "nhảy nội dung" (content jump), thường xảy ra khi nội dung động tải phía trên khung nhìn hiện tại, đẩy nội dung hiện có xuống dưới. CSS scroll anchoring là một công cụ mạnh mẽ để giải quyết vấn đề này, giúp cải thiện đáng kể trải nghiệm người dùng bằng cách duy trì vị trí cuộn của người dùng ngay cả khi nội dung thay đổi.

Hiểu về Tình Trạng Nhảy Nội Dung và Tác Động của Nó

Tình trạng nhảy nội dung thường do việc tải bất đồng bộ các tài nguyên như hình ảnh, quảng cáo, hoặc nội dung được tạo động. Mặc dù các yếu tố này nâng cao chức năng và thẩm mỹ của trang web, việc tải chậm của chúng có thể làm gián đoạn dòng đọc của người dùng. Sự thay đổi đột ngột trong layout không chỉ gây khó chịu mà còn có thể làm giảm sự tương tác và có khả năng khiến người dùng rời khỏi trang web của bạn.

Hãy tưởng tượng bạn đang đọc một bài báo có nhúng quảng cáo. Khi bạn cuộn xuống, một quảng cáo tải phía trên vị trí hiện tại của bạn, đẩy đoạn văn bản bạn đang đọc xuống xa hơn. Bạn phải dừng lại, định vị lại và tìm lại vị trí của mình. Sự gián đoạn này làm giảm trải nghiệm đọc và có thể cực kỳ khó chịu, đặc biệt trên các thiết bị di động có màn hình nhỏ hơn.

Tại sao đây là một vấn đề?

Giới Thiệu về CSS Scroll Anchoring

CSS scroll anchoring là một tính năng của trình duyệt được thiết kế để tự động điều chỉnh vị trí cuộn khi nội dung thay đổi động. Về cơ bản, nó "neo" vị trí cuộn hiện tại của người dùng vào một phần tử cụ thể trên trang, đảm bảo rằng khung nhìn vẫn tập trung vào phần tử đó ngay cả khi nội dung được chèn hoặc xóa ở phía trên. Điều này ngăn chặn các cú nhảy và dịch chuyển đột ngột có thể gây khó chịu trên các trang web động.

Cơ chế cốt lõi đằng sau scroll anchoring khá đơn giản. Khi được kích hoạt, trình duyệt sẽ theo dõi tài liệu để phát hiện các thay đổi về layout. Nếu nó phát hiện một thay đổi mà thông thường sẽ làm dịch chuyển vị trí cuộn, nó sẽ tự động điều chỉnh độ lệch cuộn để bù lại, giữ cho khung nhìn của người dùng tập trung vào cùng một nội dung.

Cách Triển Khai CSS Scroll Anchoring

Thuộc tính CSS chính kiểm soát scroll anchoring là overflow-anchor. Thuộc tính này có thể được áp dụng cho bất kỳ phần tử có thể cuộn nào, bao gồm cả chính phần tử <body>. Dưới đây là cách bạn có thể sử dụng nó:

Kích hoạt Scroll Anchoring cho Toàn bộ Trang

Để kích hoạt scroll anchoring cho toàn bộ trang web, bạn có thể áp dụng thuộc tính overflow-anchor cho phần tử <body>:


body {
  overflow-anchor: auto;
}

Đây là cách đơn giản nhất và thường là hiệu quả nhất để triển khai scroll anchoring. Giá trị auto yêu cầu trình duyệt tự động quản lý scroll anchoring cho toàn bộ tài liệu.

Vô hiệu hóa Scroll Anchoring cho các Phần tử Cụ thể

Trong một số trường hợp, bạn có thể muốn vô hiệu hóa scroll anchoring cho các phần tử cụ thể trên trang của mình. Ví dụ, bạn có thể có một thành phần dựa vào một hành vi cuộn cụ thể không tương thích với scroll anchoring. Để vô hiệu hóa scroll anchoring cho một phần tử cụ thể, hãy đặt thuộc tính overflow-anchor thành none:


.no-scroll-anchor {
  overflow-anchor: none;
}

Sau đó, áp dụng class .no-scroll-anchor cho phần tử bạn muốn loại trừ khỏi scroll anchoring.

Ví dụ Thực tế và Các Trường hợp Sử dụng

Hãy cùng khám phá một số ví dụ thực tế về cách scroll anchoring có thể được sử dụng để cải thiện trải nghiệm người dùng trên các loại trang web khác nhau:

1. Blog và các Bài báo

Như đã đề cập trước đó, các blog và bài báo là những ứng cử viên hàng đầu cho việc sử dụng scroll anchoring. Bằng cách kích hoạt scroll anchoring, bạn có thể ngăn chặn các cú nhảy nội dung khó chịu xảy ra khi hình ảnh hoặc quảng cáo tải bất đồng bộ. Điều này đảm bảo trải nghiệm đọc mượt mà và thú vị hơn cho người dùng của bạn.

Ví dụ: Hãy xem xét một bài đăng blog có nhúng hình ảnh. Nếu không có scroll anchoring, văn bản sẽ nhảy khi hình ảnh tải, làm gián đoạn dòng đọc của người đọc. Với scroll anchoring được kích hoạt, trình duyệt sẽ tự động điều chỉnh vị trí cuộn, giữ cho văn bản ổn định và ngăn chặn cú nhảy.

2. Bảng tin Mạng xã hội

Bảng tin mạng xã hội thường tải nội dung mới một cách động khi người dùng cuộn xuống. Nếu không có scroll anchoring, điều này có thể dẫn đến tình trạng nhảy nội dung và trải nghiệm người dùng khó chịu. Bằng cách kích hoạt scroll anchoring, bạn có thể đảm bảo rằng vị trí cuộn của người dùng được duy trì khi các bài đăng mới được tải, tạo ra một trải nghiệm duyệt web liền mạch và không bị gián đoạn.

Ví dụ: Hãy tưởng tượng bạn đang lướt bảng tin mạng xã hội của mình. Khi bạn đến cuối trang, các bài đăng mới sẽ được tải tự động. Nếu không có scroll anchoring, những bài đăng mới này có thể đẩy nội dung bạn vừa xem xuống xa hơn. Với scroll anchoring, trình duyệt sẽ điều chỉnh vị trí cuộn để giữ nội dung bạn đang xem trong khung nhìn.

3. Danh sách Sản phẩm Thương mại Điện tử

Các trang web thương mại điện tử thường sử dụng bộ lọc và sắp xếp động để hiển thị danh sách sản phẩm. Khi các bộ lọc được áp dụng hoặc thứ tự sắp xếp thay đổi, nội dung trên trang sẽ được cập nhật động. Nếu không có scroll anchoring, điều này có thể dẫn đến tình trạng nhảy nội dung và trải nghiệm người dùng khó hiểu. Bằng cách kích hoạt scroll anchoring, bạn có thể đảm bảo rằng vị trí cuộn của người dùng được duy trì khi danh sách sản phẩm được cập nhật, giúp họ dễ dàng duyệt và tìm kiếm sản phẩm hơn.

Ví dụ: Giả sử bạn đang duyệt một cửa hàng trực tuyến và áp dụng các bộ lọc để thu hẹp tìm kiếm cho một sản phẩm cụ thể. Mỗi khi bạn áp dụng một bộ lọc, danh sách sản phẩm sẽ được cập nhật. Nếu không có scroll anchoring, trang có thể nhảy về đầu, buộc bạn phải cuộn xuống lại. Với scroll anchoring, trang sẽ vẫn ở vị trí gần như cũ, cho phép bạn tiếp tục duyệt mà không bị gián đoạn.

4. Ứng dụng Trang đơn (SPAs)

Các ứng dụng trang đơn (SPAs) phụ thuộc nhiều vào việc tải nội dung động. Khi người dùng điều hướng qua ứng dụng, nội dung mới được tải bất đồng bộ, thường thay thế nội dung hiện có. Nếu không có scroll anchoring, điều này có thể dẫn đến tình trạng nhảy nội dung thường xuyên và trải nghiệm người dùng khó chịu. Bằng cách kích hoạt scroll anchoring, bạn có thể đảm bảo rằng vị trí cuộn của người dùng được duy trì khi nội dung thay đổi, tạo ra một ứng dụng mượt mà và phản hồi nhanh hơn.

Ví dụ: Hãy xem xét một SPA có nhiều phần được tải động khi người dùng nhấp vào các liên kết điều hướng. Nếu không có scroll anchoring, mỗi khi một phần mới được tải, trang có thể nhảy về đầu. Với scroll anchoring, trang sẽ duy trì vị trí cuộn của người dùng trong phần hiện tại, tạo ra sự chuyển tiếp liền mạch hơn giữa các phần.

Các Phương pháp Tốt nhất khi Sử dụng CSS Scroll Anchoring

Mặc dù CSS scroll anchoring là một công cụ mạnh mẽ, điều quan trọng là phải sử dụng nó một cách hiệu quả để tránh những hậu quả không mong muốn. Dưới đây là một số phương pháp tốt nhất cần ghi nhớ:

Khả năng Tương thích của Trình duyệt

CSS scroll anchoring được hỗ trợ rộng rãi bởi các trình duyệt hiện đại. Tuy nhiên, bạn nên luôn kiểm tra bảng tương thích trên Can I use để đảm bảo rằng nó được hỗ trợ bởi các trình duyệt mà người dùng của bạn có khả năng đang sử dụng.

Tính đến tháng 10 năm 2024, scroll anchoring được hỗ trợ bởi:

Đối với các trình duyệt cũ hơn không hỗ trợ scroll anchoring, hành vi này sẽ đơn giản là không có – tình trạng nhảy nội dung vẫn sẽ xảy ra. Trong những trường hợp này, bạn có thể cân nhắc sử dụng các polyfill dựa trên JavaScript để cung cấp chức năng tương tự. Tuy nhiên, hãy lưu ý rằng các polyfill này có thể phức tạp hơn và có khả năng kém hiệu quả hơn so với việc triển khai gốc của trình duyệt.

Các Giải pháp Thay thế và Dự phòng

Mặc dù CSS scroll anchoring là giải pháp được ưa chuộng để ngăn chặn tình trạng nhảy nội dung, có những phương pháp thay thế mà bạn có thể sử dụng, đặc biệt cho các trình duyệt cũ hơn hoặc trong các tình huống mà scroll anchoring không đủ.

Các Giải pháp Dựa trên JavaScript

Bạn có thể sử dụng JavaScript để điều chỉnh thủ công vị trí cuộn khi nội dung thay đổi. Phương pháp này đòi hỏi nhiều mã hơn và có thể phức tạp hơn so với việc sử dụng CSS scroll anchoring, nhưng nó mang lại sự kiểm soát lớn hơn đối với hành vi cuộn. Dưới đây là một ví dụ cơ bản:


// Lấy vị trí cuộn hiện tại
const scrollPosition = window.pageYOffset;

// Tải nội dung mới
// ...

// Khôi phục vị trí cuộn
window.scrollTo(0, scrollPosition);

Đoạn mã này ghi lại vị trí cuộn hiện tại trước khi tải nội dung mới và sau đó khôi phục nó sau khi nội dung đã được tải. Điều này ngăn trang nhảy về đầu.

Các Phần tử Giữ chỗ

Một phương pháp khác là sử dụng các phần tử giữ chỗ để dành không gian cho nội dung sẽ được tải động. Điều này ngăn nội dung hiện có bị dịch chuyển khi nội dung mới được chèn vào. Ví dụ, bạn có thể sử dụng một phần tử <div> với chiều cao và chiều rộng cố định để dành không gian cho một hình ảnh sẽ được tải sau.


<div style="width: 300px; height: 200px;">
  <img src="placeholder.gif" data-src="actual-image.jpg" alt="Image">
</div>

Trong ví dụ này, phần tử <div> dành không gian cho hình ảnh, ngăn nội dung bên dưới nó bị dịch chuyển khi hình ảnh được tải. Bạn có thể sử dụng JavaScript để thay thế hình ảnh giữ chỗ bằng hình ảnh thực tế sau khi nó đã tải xong.

Tương lai của Scroll Anchoring và Sự Ổn định của Layout

CSS scroll anchoring là một phần của nỗ lực rộng lớn hơn nhằm cải thiện sự ổn định của layout trên web. Chỉ số Cumulative Layout Shift (CLS), là một thành phần quan trọng của Core Web Vitals của Google, đo lường mức độ dịch chuyển layout không mong muốn xảy ra trên một trang. Một điểm số CLS thấp là điều cần thiết để cung cấp trải nghiệm người dùng tốt và cải thiện thứ hạng trên công cụ tìm kiếm.

Bằng cách sử dụng CSS scroll anchoring và các kỹ thuật khác để ngăn chặn tình trạng nhảy nội dung, bạn có thể giảm đáng kể điểm số CLS của trang web và cải thiện trải nghiệm người dùng tổng thể của nó. Khi các trình duyệt tiếp tục phát triển và triển khai các tính năng mới cho sự ổn định của layout, điều quan trọng là phải luôn cập nhật các phương pháp và kỹ thuật tốt nhất mới nhất.

Kết luận

CSS scroll anchoring là một công cụ có giá trị để ngăn chặn tình trạng nhảy nội dung và tạo ra trải nghiệm người dùng mượt mà hơn trên các trang web động. Bằng cách kích hoạt scroll anchoring, bạn có thể đảm bảo rằng người dùng của bạn có thể duyệt và tương tác với trang web của bạn mà không bị gián đoạn bởi các dịch chuyển layout đột ngột. Điều này không chỉ cải thiện sự hài lòng của người dùng mà còn có thể dẫn đến tăng tương tác và có khả năng cải thiện thứ hạng trên công cụ tìm kiếm.

Dù bạn đang xây dựng một blog, một nền tảng mạng xã hội, một trang web thương mại điện tử, hay một ứng dụng trang đơn, hãy cân nhắc triển khai CSS scroll anchoring để nâng cao trải nghiệm người dùng và tạo ra một trang web chuyên nghiệp và hoàn thiện hơn. Hãy nhớ kiểm tra kỹ lưỡng việc triển khai của bạn và kết hợp nó với các kỹ thuật khác để đạt được kết quả tốt nhất có thể. Hãy tận dụng sức mạnh của CSS scroll anchoring và nói lời tạm biệt với những cú nhảy nội dung khó chịu!