M

MLOG

Tiếng Việt

Hướng dẫn toàn diện về CSS overscroll-behavior, khám phá các thuộc tính, trường hợp sử dụng và các phương pháp hay nhất để kiểm soát ranh giới cuộn và tạo ra trải nghiệm người dùng liền mạch.

CSS Overscroll Behavior: Làm chủ việc kiểm soát ranh giới cuộn để nâng cao trải nghiệm người dùng (UX)

Trên web hiện đại, việc tạo ra trải nghiệm người dùng mượt mà và trực quan là tối quan trọng. Một khía cạnh quan trọng của điều này là quản lý cách hành vi cuộn trang hoạt động, đặc biệt là khi người dùng cuộn đến ranh giới của các khu vực có thể cuộn. Đây là lúc thuộc tính CSS overscroll-behavior phát huy tác dụng. Hướng dẫn toàn diện này sẽ khám phá chi tiết về overscroll-behavior, bao gồm các thuộc tính, trường hợp sử dụng và các phương pháp hay nhất để đạt được sự tương tác người dùng nâng cao.

Overscroll Behavior là gì?

overscroll-behavior là một thuộc tính CSS kiểm soát những gì xảy ra khi người dùng cuộn đến ranh giới của một phần tử (ví dụ: một vùng chứa có thể cuộn hoặc chính tài liệu). Theo mặc định, khi người dùng cuộn qua đầu hoặc cuối của một khu vực có thể cuộn, trình duyệt thường kích hoạt các hành vi như làm mới trang (trên thiết bị di động) hoặc cuộn nội dung nền. overscroll-behavior cho phép các nhà phát triển tùy chỉnh hành vi này, ngăn chặn các hiệu ứng phụ không mong muốn và tạo ra một trải nghiệm liền mạch hơn.

Hiểu về các thuộc tính

Thuộc tính overscroll-behavior chấp nhận ba giá trị chính:

Ngoài ra, overscroll-behavior có thể được áp dụng cho các trục cụ thể bằng cách sử dụng các thuộc tính phụ sau:

Ví dụ:

.scrollable-container {
  overscroll-behavior-y: contain; /* Ngăn chặn chuỗi cuộn dọc */
  overscroll-behavior-x: auto;    /* Cho phép chuỗi cuộn ngang */
}

Các trường hợp sử dụng và ví dụ

overscroll-behavior có thể được sử dụng trong nhiều tình huống khác nhau để nâng cao trải nghiệm người dùng và ngăn chặn hành vi không mong muốn. Hãy cùng khám phá một số trường hợp sử dụng phổ biến với các ví dụ thực tế.

1. Ngăn chặn làm mới trang trên di động

Một trong những cách sử dụng phổ biến nhất của overscroll-behavior là để ngăn chặn việc làm mới trang khó chịu thường xảy ra trên thiết bị di động khi người dùng cuộn qua đầu hoặc cuối trang. Điều này đặc biệt quan trọng đối với các ứng dụng trang đơn (SPA) và các trang web có nội dung động.

body {
  overscroll-behavior-y: contain; /* Ngăn chặn làm mới trang khi cuộn quá */
}

Bằng cách áp dụng overscroll-behavior: contain cho phần tử body, bạn có thể ngăn chặn hành vi kéo để làm mới trên thiết bị di động, đảm bảo trải nghiệm người dùng mượt mà và dễ đoán hơn.

2. Chứa cuộn trong Modal và Lớp phủ

Khi sử dụng modal hoặc lớp phủ, thường mong muốn ngăn nội dung bên dưới cuộn khi modal đang mở. overscroll-behavior có thể được sử dụng để chứa cuộn trong chính modal đó.

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Cho phép cuộn bên trong modal */
  overscroll-behavior: contain; /* Ngăn nội dung bên dưới cuộn */
}

.modal-content {
  /* Định dạng nội dung modal */
}

Trong ví dụ này, phần tử .modal có overscroll-behavior: contain, ngăn trang bên dưới cuộn khi người dùng đạt đến ranh giới cuộn của modal. Thuộc tính overflow: auto đảm bảo rằng chính modal có thể cuộn nếu nội dung của nó vượt quá chiều cao của nó.

3. Tạo chỉ báo cuộn tùy chỉnh

Bằng cách đặt overscroll-behavior: none, bạn có thể vô hiệu hóa hoàn toàn các hiệu ứng cuộn quá mặc định và triển khai các chỉ báo hoặc hoạt ảnh cuộn tùy chỉnh. Điều này cho phép kiểm soát tốt hơn trải nghiệm người dùng và khả năng tạo ra các tương tác độc đáo và hấp dẫn.

.scrollable-area {
  overflow: auto;
  overscroll-behavior: none; /* Vô hiệu hóa hành vi cuộn quá mặc định */
}

.scrollable-area::-webkit-scrollbar {
  display: none; /* Ẩn thanh cuộn mặc định (tùy chọn) */
}

.scroll-indicator {
  /* Định dạng chỉ báo cuộn tùy chỉnh của bạn */
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  /* ... */
}

.scrollable-area:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.1), transparent);
  pointer-events: none; /* Cho phép cuộn qua chỉ báo */
}

Ví dụ này minh họa cách vô hiệu hóa hành vi cuộn quá mặc định và tạo một chỉ báo cuộn tùy chỉnh bằng cách sử dụng các phần tử giả CSS và gradient. Thuộc tính pointer-events: none đảm bảo rằng chỉ báo không can thiệp vào việc cuộn.

4. Nâng cao Carousel và Slider

overscroll-behavior-x có thể đặc biệt hữu ích cho các carousel và slider nơi cuộn ngang là tương tác chính. Bằng cách đặt overscroll-behavior-x: contain, bạn có thể ngăn carousel vô tình kích hoạt điều hướng tới/lui của trình duyệt trên thiết bị di động.

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; /* Ngăn chặn điều hướng tới/lui */
}

.carousel-item {
  scroll-snap-align: start;
  /* ... */
}

Đoạn mã này cho thấy cách chứa cuộn ngang trong một carousel, ngăn chặn điều hướng không mong muốn và đảm bảo một trải nghiệm người dùng tập trung.

5. Cải thiện khả năng truy cập trong các vùng có thể cuộn

Khi triển khai các vùng có thể cuộn, điều quan trọng là phải xem xét khả năng truy cập. Mặc dù overscroll-behavior chủ yếu ảnh hưởng đến các tương tác trực quan, nó có thể gián tiếp tác động đến khả năng truy cập bằng cách ngăn chặn hành vi không mong đợi và đảm bảo trải nghiệm người dùng nhất quán trên các thiết bị và trình duyệt khác nhau.

Hãy đảm bảo rằng các vùng có thể cuộn có các thuộc tính ARIA thích hợp (ví dụ: role="region", aria-label) để cung cấp thông tin ngữ nghĩa cho các công nghệ hỗ trợ. Kiểm tra các triển khai của bạn với trình đọc màn hình để xác minh rằng hành vi cuộn có thể truy cập và dễ đoán.

Các phương pháp hay nhất và lưu ý

Khi sử dụng overscroll-behavior, hãy ghi nhớ các phương pháp hay nhất và những lưu ý sau:

Khả năng tương thích trình duyệt

overscroll-behavior có hỗ trợ trình duyệt tuyệt vời trên các trình duyệt hiện đại, bao gồm Chrome, Firefox, Safari và Edge. Tuy nhiên, luôn là một ý tưởng tốt để kiểm tra thông tin tương thích trình duyệt mới nhất trên các trang web như Can I Use (caniuse.com) để đảm bảo rằng đối tượng mục tiêu của bạn có thể trải nghiệm đúng cách các triển khai của bạn.

Đối với các trình duyệt cũ hơn không hỗ trợ overscroll-behavior, bạn có thể cần sử dụng polyfill hoặc các kỹ thuật thay thế để đạt được các hiệu ứng tương tự. Tuy nhiên, hãy nhớ rằng các phương pháp này có thể không tái tạo hoàn hảo hành vi của overscroll-behavior gốc.

Ví dụ với mã nguồn và bối cảnh toàn cầu

Ví dụ 1: Hỗ trợ đa ngôn ngữ trong một bảng tin cuộn

Hãy tưởng tượng một bảng tin hiển thị các tiêu đề tin tức bằng nhiều ngôn ngữ. Bạn muốn đảm bảo việc cuộn mượt mà bất kể ngôn ngữ được sử dụng, ngăn chặn việc làm mới trang vô tình trên di động.

<div class="news-ticker">
  <ul>
    <li><span lang="en">Breaking News: Global Stock Market Update</span></li>
    <li><span lang="fr">Dernières Nouvelles: Mise à Jour du Marché Boursier Mondial</span></li>
    <li><span lang="ja">速報：世界の株式市場の最新情報</span></li>
    <!-- Thêm các tiêu đề bằng các ngôn ngữ khác -->
  </ul>
</div>

<style>
.news-ticker {
  overflow-x: auto;
  overscroll-behavior-x: contain; /* Ngăn chặn điều hướng tới/lui vô tình trên di động */
  white-space: nowrap;
}

.news-ticker ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
  animation: ticker 20s linear infinite;
}

.news-ticker li {
  display: inline-block;
  margin-right: 20px;
}

@keyframes ticker {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
</style>

Bằng cách áp dụng overscroll-behavior-x: contain cho phần tử .news-ticker, bạn ngăn chặn bảng tin vô tình kích hoạt điều hướng tới/lui của trình duyệt trên thiết bị di động, bất kể ngôn ngữ nào đang được hiển thị.

Ví dụ 2: Danh mục sản phẩm quốc tế với hình ảnh có thể phóng to

Hãy xem xét một trang web thương mại điện tử có danh mục sản phẩm với hình ảnh có thể phóng to. Bạn muốn ngăn trang bên dưới cuộn khi người dùng đang phóng to hình ảnh trong danh mục.

<div class="product-catalog">
  <div class="product">
    <img src="product1.jpg" alt="Product Image" class="zoomable-image">
  </div>
  <div class="product">
    <img src="product2.jpg" alt="Product Image" class="zoomable-image">
  </div>
  <!-- Thêm các sản phẩm khác -->
</div>

<style>
.product-catalog {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.product {
  width: 300px;
  margin: 20px;
}

.zoomable-image {
  width: 100%;
  cursor: zoom-in;
}

.zoomable-image.zoomed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: rgba(0, 0, 0, 0.8);
  cursor: zoom-out;
  overscroll-behavior: contain; /* Ngăn trang bên dưới cuộn */
}
</style>

<script>
const images = document.querySelectorAll('.zoomable-image');

images.forEach(image => {
  image.addEventListener('click', () => {
    image.classList.toggle('zoomed');
  });
});
</script>

Trong ví dụ này, khi người dùng nhấp vào một .zoomable-image, nó sẽ được chuyển sang trạng thái phóng to với position: fixed, bao phủ toàn bộ khung nhìn. Thuộc tính overscroll-behavior: contain được áp dụng cho hình ảnh đã được phóng to, ngăn danh mục sản phẩm bên dưới cuộn trong khi hình ảnh đang được phóng to.

Kết luận

overscroll-behavior là một thuộc tính CSS mạnh mẽ cung cấp cho các nhà phát triển quyền kiểm soát tốt hơn đối với ranh giới cuộn và trải nghiệm người dùng. Bằng cách hiểu các thuộc tính và trường hợp sử dụng của nó, bạn có thể tạo ra các tương tác mượt mà hơn, trực quan hơn và ngăn chặn các hành vi không mong muốn trên trang web và ứng dụng của mình. Hãy nhớ kiểm tra kỹ lưỡng, xem xét khả năng truy cập và sử dụng overscroll-behavior một cách hợp lý để đạt được kết quả tốt nhất. Việc triển khai overscroll-behavior hiệu quả đòi hỏi sự cân bằng giữa việc kiểm soát và kỳ vọng của người dùng, nâng cao khả năng sử dụng mà không làm gián đoạn các tương tác tự nhiên.

Tài liệu tham khảo thêm