Giới thiệu về scroll-snap

Bài đăng này đã không được cập nhật trong 3 năm

Tại sao phải dùng `scroll snap`

Câu trả lời cũng tương tự như câu hỏi 'Tại sao phải responsive ?', với nhu cầu sử dụng smartphone, tablet ngày càng nhiều thì mong muốn đáp ứng được điều này cũng là lẽ đương nhiên, kèm theo đó là UX - trải nghiệm người dùng cần được nâng lên. Ví dụ như, mọt galary hình ảnh, nếu hiển thị chiều dọc trên điện thoại thì người dùng phải scroll rất nhiều, điều đó khiến UX rất tệ và user sẽ không muốn xem phần bên dưới của trang web nữa, do vậy chúng ta phải tối ưu cho UX thật tốt.

Scroll căn bản

Để tạo một scrolling container, thì chúng ta cần:

Sử dụng overflow-x: auto
Sắp xếp các phần tử thành 1 hàng

<div class="section">
  <div class="section__item">Item 1</div>
  <div class="section__item">Item 2</div>
  <div class="section__item">Item 3</div>
  <div class="section__item">Item 4</div>
  <div class="section__item">Item 5</div>
</div>

.section {
  white-space: nowrap;
  overflow-x: auto;
}

Đã từ lâu,chúng ta sử dụng white-space: nowrap; để sắp xếp các element thẳng hàng,tuy nhiên bây giờ chúng ta đã có một thứ hiện đại hơn, đó là flexbox;

.section {
  display: flex;
  overflow-x: auto;
}

Vấn đề scroll với `overflow`

Có một vấn đề chính là scroll với overflow có UX chưa tốt trên di động, để có một trải nghiệm mượt mà chúng ta cần một giải pháp tốt hơn, chi tiết tại sau overflow chưa tốt bạn có thể xem thêm video dưới:

Về `scroll snap`

Để sử dụng scroll snap thì các phần tử bên trong container phải là inline - thẳng trên 1 hàng. Tái sự dụng phần code phía trên, chúng ta cần bổ sung:

Thêm thuộc tính scroll-snap-type vào css của container
Thêm thuộc tính scroll-snap-align vào css của các element bên trong container

.section {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.section__item {
  scroll-snap-align: start;
}

Lúc này, việc scroll của bạn sẽ rất mượt mà, giống như là đang sử dụng slick.js vậy

Chi tiết

`scroll-snap-type`

scroll-snap-type xác định kiểu snap cho container sẽ có kiểu scroll như thế nào và hướng ra sao: Như đây là xác định hướng scroll của container

/* Chiều ngang */
.section {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x;
}
/* Chiều dọc */
.section {
  height: 250px;
  overflow-y: auto;
  scroll-snap-type: y;
}

Còn đây là khi chúng ta cần chọn kiểu scroll, giá trị default sẽ là proximity tuy nhiên sẽ không đẹp cho lắm, mình ưu tiên sử dụng mandatory hơn

proximity: là giá trị default, trình duyệt sẽ snap theo các điểm mặc định mà trình duyệt đã tính toán.
mandatory: trình duyệt sẽ snap theo từng điểm scroll, giả sử scroll-snap-align là start thì trình duyệt sẽ scroll theo hướng bắt đầu của container