Trang này được dịch bởi Cloud Translation API.

Xây dựng thành phần Stories

Tổng quan cơ bản về cách xây dựng một trải nghiệm tương tự như Tin của Instagram trên web.

Adam Argyle

Trong bài đăng này, tôi muốn chia sẻ suy nghĩ về việc xây dựng thành phần Stories cho web đáp ứng, hỗ trợ điều hướng bằng bàn phím và hoạt động trên trình duyệt.

Bản minh hoạ

Nếu bạn muốn xem minh hoạ thực tế về cách tự xây dựng thành phần Stories này, hãy xem lớp học lập trình về thành phần Stories.

Nếu bạn thích xem video hơn, sau đây là phiên bản của bài đăng này trên YouTube:

Tổng quan

Hai ví dụ phổ biến về trải nghiệm người dùng của tính năng Stories là Snapchat Stories và Instagram Stories (chưa kể đến các nhóm thiết bị). Nói chung về trải nghiệm người dùng, Stories thường là mẫu dành cho thiết bị di động, tập trung vào thao tác nhấn để khám phá nhiều gói thuê bao. Ví dụ: trên Instagram, người dùng mở một câu chuyện của một người bạn và xem qua các bức ảnh trong đó. Chúng thường gặp nhiều bạn bè như vậy tại bất cứ lúc nào. Bằng cách nhấn vào phía bên phải của thiết bị, người dùng sẽ chuyển đến trang của người bạn đó tin bài tiếp theo. Bằng cách vuốt sang phải, người dùng sẽ chuyển đến một người bạn khác. Thành phần Story khá giống với băng chuyền, nhưng cho phép điều hướng mảng đa chiều khác với mảng đơn chiều. Giống như có một băng chuyền bên trong từng băng chuyền. 🤯

Mảng đa chiều trực quan hoá bằng thẻ. Từ trái sang phải là một chồng thẻ có đường viền màu tím, còn bên trong mỗi thẻ là 1-nhiều thẻ có viền màu lục lam. Liệt kê trong danh sách. — Băng chuyền bạn bè đầu tiên
Thứ 2 "được xếp chồng" băng chuyền tin bài
👍 Liệt kê trong danh sách, còn gọi là: mảng đa chiều

Chọn công cụ phù hợp cho công việc

Nhìn chung, tôi thấy việc xây dựng thành phần này khá đơn giản, nhờ một vài mẹo các tính năng quan trọng của nền tảng web. Hãy cùng tìm hiểu về chúng!

Lưới CSS

Bố cục của chúng ta hoá ra không phải là thứ tự cao cho Lưới CSS vì nó được trang bị một số những cách hiệu quả để sắp xếp nội dung.

Bố cục Friends

Trình bao bọc thành phần .stories chính là chế độ xem cuộn ngang ưu tiên thiết bị di động:

.stories {
  inline-size: 100vw;
  block-size: 100vh;

  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}

/* desktop constraint */
@media (hover: hover) and (min-width: 480px) {
  max-inline-size: 480px;
  max-block-size: 848px;
}

Sử dụng Công cụ của Chrome cho nhà phát triển Chế độ thiết bị để đánh dấu các cột do Lưới tạo

Hãy phân tích bố cục grid đó:

Chúng tôi hiển thị lấp đầy khung nhìn trên thiết bị di động bằng 100vh và 100vw một cách rõ ràng và ràng buộc kích thước trên máy tính
/ phân tách các mẫu hàng và cột
auto-flow dịch sang grid-auto-flow: column
Mẫu tự động luồng là 100%, trong trường hợp này là bất kỳ chiều rộng nào của cửa sổ cuộn là

Lưu ý: Hãy lưu ý rằng vị trí của dấu phân cách / so với auto-flow là rất quan trọng. Nếu auto-flow xuất hiện trước / thì đây sẽ là viết tắt của grid-auto-flow: row.

Trên điện thoại di động, hãy xem xét kích thước hàng, chẳng hạn như chiều cao của khung nhìn và mỗi cột là chiều rộng của khung nhìn. Tiếp tục với Snapchat Stories và Ví dụ về Instagram Stories (Tin trên Instagram), mỗi cột sẽ là một tin bài của một người bạn. Chúng tôi muốn có bạn tin bài để tiếp tục bên ngoài khung nhìn để chúng tôi có thể di chuyển đến. Lưới sẽ tạo bất kỳ cột nào cần thiết để bố cục HTML của bạn cho mỗi người bạn câu chuyện, tạo ra một vùng chứa cuộn động và thích ứng cho chúng tôi. Lưới cho phép chúng tôi tập trung toàn bộ tác động.

Xếp chồng

Đối với mỗi người bạn, chúng ta cần những câu chuyện của họ ở trạng thái sẵn sàng phân trang. Để chuẩn bị cho ảnh động và các hoa văn thú vị khác, tôi đã chọn một ngăn xếp. Khi tôi nói ngăn xếp, ý tôi là giống như bạn đang nhìn xuống bánh mì kẹp, không giống như bạn nhìn từ phía bên.

Với lưới CSS, chúng ta có thể xác định lưới một ô (tức là một hình vuông), trong đó các hàng và các cột sẽ có chung một email đại diện ([story]), sau đó mỗi phần tử con sẽ được chỉ định vào email đại diện đó. không gian đơn ô bị bí danh:

.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.story {
  grid-area: story;
  background-size: cover;
  …
}

Thao tác này đặt HTML của chúng ta kiểm soát thứ tự xếp chồng cũng như giữ tất cả các phần tử đang hoạt động. Lưu ý rằng chúng ta không cần làm gì với vị trí absolute hoặc z-index và chúng tôi không cần nhập chính xác bằng height: 100% hay width: 100%. Lưới mẹ đã xác định kích thước của khung nhìn hình ảnh câu chuyện, vì vậy không có thành phần nào trong số này cần phải được yêu cầu điền vào!

Điểm chụp nhanh cuộn CSS

Thông số kỹ thuật của CSS Scroll Snap Points giúp thực hiện điều này một nút để khoá các phần tử vào khung nhìn khi cuộn. Trước khi các thuộc tính CSS này tồn tại, bạn phải sử dụng JavaScript, và dù sao thì đó là việc... phức tạp. Trả phòng Giới thiệu điểm chụp nhanh của CSS Scroll của Sarah Drasner để biết chi tiết về cách sử dụng chúng.

Cuộn theo chiều ngang không có và có kiểu scroll-snap-points. Không có tính năng này, người dùng có thể thoải mái cuộn như bình thường. Nhờ vậy, trình duyệt sẽ yên tâm trên từng mục.

mẹ

.stories {
  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}

Phần tử mẹ có trạng thái cuộn quá mức xác định hành vi chụp nhanh.

con

.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

Trẻ em có thể chọn trở thành mục tiêu nhanh.

Tôi chọn Scroll Snap Points vì một số lý do:

Hỗ trợ tiếp cận miễn phí. Thông số kỹ thuật Scroll Snap Points cho biết rằng việc nhấn phím Các phím Mũi tên trái và Mũi tên phải phải di chuyển qua các điểm chụp nhanh theo mặc định.
Thông số kỹ thuật ngày càng phát triển. Thông số kỹ thuật Scroll Snap Points sẽ có các tính năng và điểm cải tiến mới từ trước đến nay, vậy nên thành phần Stories của tôi có thể sẽ chỉ hoạt động hiệu quả hơn nhờ vào đây.
Dễ triển khai. Scroll Snap Points thực tế được xây dựng cho trường hợp sử dụng phân trang theo chiều ngang tập trung vào cảm ứng.
Tiệm tính kiểu nền tảng tự do. Mọi nền tảng sẽ cuộn và hoạt động theo phong cách riêng, chứ không phải quán tính chuẩn hoá có thể có phong cách cuộn và nghỉ ngơi kỳ lạ.

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

Chúng tôi đã thử nghiệm trên Opera, Firefox, Safari và Chrome, cùng với Android và iOS. Sau đây là một bản tóm tắt ngắn gọn về các tính năng web, trong đó chúng tôi nhận thấy có sự khác biệt về chức năng và khả năng hỗ trợ.

Mặc dù chúng tôi có một số CSS không áp dụng, vì vậy một số nền tảng hiện đang bỏ lỡ trải nghiệm người dùng tối ưu hoá. Tôi không thích việc không cần quản lý những tính năng này và cảm thấy tự tin rồi chúng sẽ tiếp cận các trình duyệt và nền tảng khác.

`scroll-snap-stop`

Băng chuyền là một trong những trường hợp sử dụng chính của trải nghiệm người dùng khiến họ tạo ra Thông số kỹ thuật về Điểm chụp nhanh của CSS. Không giống như Stories, băng chuyền không phải lúc nào cũng phải dừng trên mỗi hình ảnh sau khi người dùng tương tác với hình ảnh đó. Bạn có thể nên nhanh chóng duyệt qua băng chuyền. Mặt khác, các tin bài được dẫn dắt hiệu quả nhất theo từng video, và đó chính xác là những gì scroll-snap-stop cung cấp.

.user {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

Tại thời điểm viết bài đăng này, scroll-snap-stop chỉ được hỗ trợ trên nền tảng Chromium trình duyệt. Trả phòng Khả năng tương thích với trình duyệt để được cập nhật. Tuy nhiên, đây không phải là trình chặn. Điều đó chỉ có nghĩa là trên các trình duyệt không được hỗ trợ người dùng có thể vô tình bỏ qua một người bạn. Người dùng sẽ phải cẩn thận hơn, hoặc chúng tôi sẽ cần viết JavaScript để đảm bảo người bạn bị bỏ qua sẽ không được đánh dấu là đã xem.

Đọc thêm trong nếu đang quan tâm.

`overscroll-behavior`

Bạn đã bao giờ cuộn qua một phương thức khi đột nhiên bạn bắt đầu cuộn nội dung phía sau cửa sổ phụ? overscroll-behavior cho phép nhà phát triển đặt nội dung cuộn được và không bao giờ để nó rời đi. Nội dung này phù hợp trong mọi trường hợp. Thành phần Stories của tôi sử dụng tính năng này để ngăn các thao tác vuốt và cuộn bổ sung rời khỏi thành phần.

.stories {
  overflow-x: auto;
  overscroll-behavior: contain;
}

Safari và Opera là 2 trình duyệt không hoạt động hỗ trợ việc này và đó là hoàn toàn ổn. Những người dùng đó sẽ có được trải nghiệm cuộn quá mức như họ đã quen thuộc và có thể không bao giờ nhận thấy cải tiến này. Cá nhân tôi rất hâm mộ và thích bao gồm tính năng này trong hầu hết mọi tính năng cuộn quá mức mà tôi triển khai. Đó là chỉ có thể giúp cải thiện trải nghiệm người dùng.

`scrollIntoView({behavior: 'smooth'})`

Khi người dùng nhấn hoặc nhấp và đã đọc hết tập truyện của một người bạn, đã đến lúc di chuyển đến người bạn tiếp theo trong tập hợp điểm chụp nhanh cuộn. Bằng JavaScript, chúng tôi có thể tham khảo người bạn tiếp theo và yêu cầu mà người dùng đã cuộn vào chế độ xem. Sự hỗ trợ cho những khái niệm cơ bản này rất tuyệt vời; mọi trình duyệt rồi cuộn vào chế độ xem. Tuy nhiên, không phải trình duyệt nào cũng làm được điều đó 'smooth'. Điều này chỉ có nghĩa là sẽ được cuộn vào chế độ xem thay vì được chụp nhanh.

element.scrollIntoView({
  behavior: 'smooth'
})

Safari là trình duyệt duy nhất không hỗ trợ behavior: 'smooth' ở đây. Trả phòng Khả năng tương thích với trình duyệt để được cập nhật.

Thực hành

Giờ bạn đã biết cách tôi thực hiện điều đó, bạn sẽ làm thế nào?! Hãy đa dạng hoá và tìm hiểu tất cả các cách xây dựng trên web. Tạo nhiễu, tweet cho tôi phiên bản của bạn rồi tôi sẽ thêm vào phần Bản phối lại của cộng đồng ở bên dưới.

Bản phối lại của cộng đồng

@geoffrich_ với Svelte: bản minh hoạ và mã
@GauteMeekOlsen với Vue: bản minh hoạ + mã
@AnaestheticsApp với Lit: bản minh hoạ và mã