Sự kiện Scroll Snap

Từ Chrome 129, bạn có thể dùng các sự kiện scrollSnapChange và scrollSnapChanging từ JavaScript. Bằng cách triển khai các sự kiện chụp nhanh tích hợp sẵn, trạng thái chụp nhanh không nhìn thấy trước đó sẽ trở thành hành động, vào đúng thời điểm và luôn chính xác. Nếu không có những sự kiện này, bạn sẽ không thấy thuận tiện.

Trước scrollSnapChange, bạn có thể sử dụng trình quan sát giao lộ để tìm phần tử nào đang vượt qua cổng cuộn. Tuy nhiên, việc xác định phần tử nào đã bị chụp bị giới hạn trong một số trường hợp. Ví dụ: bạn có thể xác định xem các mục chụp nhanh có lấp đầy cổng cuộn hay lấp đầy phần lớn cổng cuộn. Để thực hiện việc này, bạn sẽ quan sát các phần tử giao nhau của vùng cuộn, sau đó dựa vào mục nào đang sử dụng phần lớn khu vực cuộn, hãy giả định đây là mục tiêu chụp nhanh, sau đó đợi scrollend và hành động khi mục được chụp nhanh (mục tiêu chụp nhanh).

Tuy nhiên, trước scrollSnapChanging, bạn không thể biết được khi nào mục tiêu chụp nhanh thay đổi hoặc thay đổi thành gì (chẳng hạn như khi thực hiện thao tác hất cuộn).

Tin vui là những sự kiện mới này giúp thông tin này được cập nhật nhanh chóng và dễ dàng. Điều này cho phép tương tác nhanh với thao tác cuộn để vượt xa khả năng hiện tại, đồng thời cho phép tổ chức các mối quan hệ chụp nhanh và các tình huống phản hồi mới về giao diện người dùng.

scrollSnapChange

Sự kiện này chỉ kích hoạt nếu một cử chỉ cuộn làm cho một mục tiêu chụp nhanh mới được đặt vào, và theo thứ tự sau

1. Sau khi cuộn xong.
2. Trước scrollend.

Sự kiện này kích hoạt ngay trước scrollend, khi thao tác cuộn hoàn tất và chỉ khi một mục tiêu chụp nhanh mới được đặt vào. Việc này khiến sự kiện trở nên lười biếng hoặc xảy ra đúng lúc khi cử chỉ cuộn hoàn tất.

scroller.addEventListener('scrollsnapchange', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})

scroller.onscrollsnapchange = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

Sự kiện này sẽ hiển thị mục được chụp nhanh trên đối tượng sự kiện dưới dạng snapTargetBlock và snapTargetInline. Nếu trình cuộn chỉ ở chế độ ngang, thuộc tính snapTargetBlock sẽ là null. Giá trị của thuộc tính sẽ là nút phần tử.

Chi tiết độc đáo về scrollSnapChange

Không kích hoạt cho đến khi người dùng thả cử chỉ

Nếu ngón tay vẫn trên màn hình hoặc các ngón tay trên bàn di chuột, cho biết cử chỉ của người dùng chưa cuộn xong, tức là thao tác cuộn chưa kết thúc. Điều này có nghĩa là mục tiêu chụp nhanh chưa thay đổi, đang chờ một cử chỉ hoàn chỉnh của người dùng.

Không kích hoạt nếu mục tiêu chụp nhanh không thay đổi

Sự kiện này dùng để thay đổi ảnh chụp nhanh và nếu mục tiêu chụp nhanh không thay đổi, sự kiện sẽ không kích hoạt, ngay cả khi người dùng tương tác với trình cuộn. Tuy nhiên, trên thực tế, người dùng đã cuộn, vì vậy, khi hoàn tất thao tác cuộn, sự kiện scrollend vẫn kích hoạt.

scrollSnapChanging

Sự kiện này kích hoạt ngay khi trình duyệt đã quyết định rằng cử chỉ cuộn có hoặc sẽ dẫn đến mục tiêu chụp nhanh mới. Nó kích hoạt ngay lập tức và trong khi cuộn.

scroller.addEventListener('scrollsnapchanging', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})

scroller.onscrollsnapchanging = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

Sự kiện này sẽ hiển thị mục được chụp nhanh trên đối tượng sự kiện dưới dạng snapTargetBlock và snapTargetInline. Nếu trình cuộn chỉ ở dạng dọc, thuộc tính snapTargetInline sẽ là null. Giá trị của thuộc tính sẽ là nút phần tử.

Chi tiết duy nhất cho scrollSnapReplace

Kích hoạt sớm và thường xuyên trong cử chỉ cuộn

Không giống như scrollSnapChange chờ một cử chỉ cuộn hoàn chỉnh của người dùng, sự kiện này sẽ kích hoạt một cách nhanh chóng trong khi người dùng cuộn bằng ngón tay hoặc sử dụng bàn di chuột. Giả sử người dùng đang cuộn chậm mà không nhấc ngón tay, scrollSnapChanging sẽ kích hoạt nhiều lần trong cử chỉ, miễn là người dùng đang di chuyển qua nhiều mục tiêu chụp nhanh có thể có. Mỗi lần người dùng cuộn, nếu trình duyệt đã xác định rằng khi phát hành, mục tiêu đó sẽ dựa vào một mục tiêu chụp nhanh mới, thì sự kiện sẽ kích hoạt để cho bạn biết đó là phần tử nào.

Không bắn tất cả mục tiêu chụp nhanh trong quá trình đến mục tiêu chụp nhanh mới

Hơn nữa, hãy cân nhắc việc hất, trong đó người dùng thực hiện cử chỉ cuộn kéo ra nhiều mục tiêu chụp nhanh cùng lúc; sự kiện này sẽ kích hoạt một lần với mục tiêu sẽ được duy trì. Vì vậy, hãy hào hứng nhưng không lãng phí, cung cấp cho bạn mục tiêu chụp nhanh càng sớm càng tốt.

Trường hợp sử dụng và ví dụ

Những sự kiện này hỗ trợ nhiều trường hợp sử dụng mới, đồng thời giúp triển khai các mẫu hiện tại dễ dàng hơn nhiều. Một ví dụ điển hình là bật ảnh động được kích hoạt chụp nhanh. Hiển thị mục chụp nhanh theo ngữ cảnh, phần tử con của mục chụp nhanh hoặc thông tin liên quan khi đó là mục tiêu chụp nhanh.

Các mẫu sau minh hoạ một số trường hợp sử dụng để giúp bạn làm việc hiệu quả ngay lập tức.

Đánh dấu lời chứng thực

Ví dụ này quảng bá hoặc tập trung vào hình ảnh lời chứng thực ngắn gọn.

scroller.onscrollsnapchange = event => {
  scroller.querySelector(':scope .snapped')?.classList.remove('snapped')
  event.snapTargetInline.classList.add('snapped')
}

Hiển thị chú thích cho mục được chụp nhanh

Ví dụ này hiển thị chú thích cho mục được chụp nhanh. Cả hai sự kiện đều có trong bản minh hoạ này, vì vậy, bạn có thể thấy sự khác biệt về thời gian và trải nghiệm người dùng giữa scrollSnapChange và scrollSnapChanging.

Tạo ảnh động một lần, các thành phần con của một trang trình bày được chụp nhanh

Ví dụ này xác định thời điểm một trang trình bày mới được đưa vào và dừng lên, đây là thời điểm tuyệt vời để tạo hiệu ứng động cho nội dung một lần.

document.addEventListener('scrollsnapchange', event => {
  event.snapTargetBlock.classList.add('seen')
})

Nhấp vào cả x và y trong một trình cuộn

Tính năng cuộn nhanh hoạt động đối với các trình cuộn cho phép cuộn ngang và dọc. Bản minh hoạ này cho thấy cả mục tiêu scrollSnapChanging và scrollSnapChange khi bạn di chuyển xung quanh lưới. Bản minh hoạ này cho thấy cách phần tử mà trình duyệt đang truy cập có thể không phải lúc nào cũng là phần tử bạn nghĩ là đúng.

Hai trình cuộn được liên kết

Bản minh hoạ này có hai vùng chứa chụp nhanh cuộn, trong đó một vùng chứa danh sách các đường liên kết cấp cao và vùng chứa thực tế là nội dung được phân trang. Sự kiện scrollSnapChanging mới khiến việc liên kết các trạng thái chụp nhanh của các đối tượng này theo hai chiều trở nên đơn giản để chúng luôn được đồng bộ hoá.

Công cụ chọn màu OKLCH

Bản minh hoạ này có 3 trình cuộn, mỗi trình đại diện cho một kênh màu riêng trong OKLCH. Mục được chụp nhanh được đồng bộ hoá với nhóm nút chọn có liên quan và dữ liệu có thể được truy xuất từ một biểu mẫu gói dữ liệu đầu vào. Đối với người dùng dùng chuột hoặc chạm, bạn có thể cuộn đến giá trị mong muốn. Đối với người dùng bàn phím, bạn có thể nhấn phím tab và sử dụng các phím mũi tên. Đối với trình đọc màn hình, đây chỉ là một biểu mẫu.

Chụp nhanh các trung tâm hoạt ảnh đáng kinh ngạc

Bản minh hoạ này dần dần nâng cao trải nghiệm chụp nhanh thao tác cuộn với các hiệu ứng chuyển đổi được kích hoạt nhanh bằng scrollsnapchange.

Kiểm tra tính năng hỗ trợ sự kiện bằng JavaScript sau:

if ('onscrollsnapchange' in window) {
  // ok to use snap change
}

Nhập thước kẻ có thể cuộn

Bản minh hoạ này có thước cuộn như một cách thay thế để chọn độ dài cho việc nhập một số. Nhập trực tiếp các giá trị vào mục nhập số hoặc cuộn đến kích thước. Sự kiện thay đổi dùng để xoá lựa chọn trong cử chỉ của người dùng, còn sự kiện thay đổi được dùng để cập nhật trạng thái và củng cố lựa chọn của người dùng.

Luồng che phủ

Bản minh hoạ này được xây dựng dựa trên tính năng tái tạo ảnh động di chuyển tuyệt vời của Bramus Van Damme về quy trình biểu diễn bìa nổi tiếng của macOS (cả video hướng dẫn). Có một điểm khác biệt là scrollSnapChanging dùng để ẩn tiêu đề album và scrollSnapChange dùng để trình bày tiêu đề. Các sự kiện giúp sắp xếp nội dung một cách háo hức cho tiêu đề cũ và một phần trình bày từng phần của tiêu đề mới.

Thêm ý tưởng để khơi nguồn cảm hứng sáng tạo

Giờ đây, việc biết phần tử nào sắp được chụp nhanh và phần tử nào đang được chụp nhanh không hề đơn giản, có rất nhiều khả năng mới! Dưới đây là danh sách các ý tưởng giúp truyền cảm hứng cho khả năng sáng tạo và các trường hợp sử dụng khác:

• Kích hoạt tính năng tải từng phần, còn gọi là snapchange đã kích hoạt kết xuất hoặc tìm nạp dữ liệu.
• Hình thu nhỏ của đoạn phim liên kết với một hình ảnh lớn hơn.
• Bật/tắt tính năng phát/tạm dừng cho đoạn giới thiệu video để quay hình thu nhỏ video.
• Theo dõi trong Analytics
• Kể chuyện cuộn
• Giao diện/trải nghiệm người dùng Wheel of Fortune
• Mục tiêu chụp nhanh sẽ có một chú thích cố định.
• Nhấn để chụp nhanh
• Chụm để xem
• Âm thanh chớp nhoáng
• Giao diện người dùng vuốt
• Thẻ hoặc băng chuyền có thể vuốt

Nghiên cứu khác

Nhóm Chrome rất vui khi được nghe bạn tạo ra những API mới này và hy vọng rằng API này sẽ giúp đơn giản hoá trải nghiệm có thể cuộn của bạn.

Tài nguyên:

• Quy cách CSS
• Giải thích về Scroll Snap
• Bộ sưu tập CodePen