Sự kiện Scroll Snap

Adam Argyle

Kể từ Chrome 129, bạn có thể sử 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. Đây là một tính năng tiện lợi mà bạn không có được nếu không có các sự kiện này.

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 băng qua cổng cuộn, nhưng việc xác định nội dung nào được chụp nhanh chỉ được áp dụng 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 thời điểm mục tiêu chụp nhanh thay đổi hoặc mục tiêu đó sẽ thay đổi thành gì (chẳng hạn như khi cuộn nhanh).

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 đã dẫn đến việc đặt mục tiêu chụp nhanh mới và theo thứ tự sau

1. Sau khi cuộn đã nghỉ.
2. Trước scrollend.

Sự kiện này kích hoạt ngay trước scrollend, khi cuộn hoàn tất và chỉ khi một mục tiêu chụp nhanh mới được đặt. Điều này khiến sự kiện có cảm giác tải lười hoặc tải đúng lúc khi thao tác 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 thanh cuộn chỉ theo chiều ngang, thuộc tính snapTargetBlock sẽ là null. Giá trị của thuộc tính sẽ là nút phần tử.

Thông tin chi tiết riêng biệt cho scrollSnapChange

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

Một 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 hoàn tất thao tác cuộn, tức là thao tác cuộn chưa kết thúc, tức là mục tiêu chụp nhanh chưa thay đổi, đang chờ 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ành cho thay đổi về tính năng 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 thanh cuộn. Tuy nhiên, 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 sẽ kích hoạt ngay khi trình duyệt quyết định rằng cử chỉ cuộn đã hoặc sẽ dẫn đến một mục tiêu chụp nhanh mới. Lệnh này 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 thanh cuộn chỉ theo chiều dọc, thì 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ờ người dùng hoàn tất cử chỉ cuộn, sự kiện này sẽ kích hoạt ngay khi người dùng cuộn bằng ngón tay hoặc sử dụng bàn di chuột. Hãy xem xét trường hợp người dùng cuộn chậm mà không nhấc ngón tay lên, scrollSnapChanging sẽ kích hoạt nhiều lần trong cử chỉ này miễn là người dùng đang kéo nhiều mục tiêu chụp nhanh tiềm năng. Mỗi khi người dùng cuộn, nếu trình duyệt đã xác định rằng khi thả, trình duyệt sẽ nằm trên 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 kích hoạt tất cả mục tiêu chụp nhanh trên đường đến mục tiêu chụp nhanh mới

Hơn nữa, hãy xem xét một thao tác hất, trong đó người dùng thực hiện một cử chỉ hất cuộn trải dài trên nhiều mục tiêu chụp nhanh cùng một lúc; sự kiện này sẽ kích hoạt một lần với mục tiêu sẽ được đặt trên đó. Vì vậy, tính năng này rất háo hức 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ụ

Các sự kiện này cho phép 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, mục con của mục chụp nhanh hoặc thông tin liên quan theo ngữ cảnh khi mục đó là mục tiêu chụp nhanh.

Các mẫu sau đây 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.

Làm nổi bật lời chứng thực

Ví dụ này quảng bá hoặc tập trung vào lời chứng thực được chụp nhanh.

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 cho các thành phần con của một trang trình bày được chụp nhanh

Ví dụ này biết thời điểm một trang trình bày mới đã được đặt và dừng lại, đây là thời điểm thích hợp để tạo ảnh độ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 cuộn xung quanh lưới. Bản minh hoạ này cho thấy cách trình duyệt có thể không phải lúc nào cũng chụp nhanh phần tử mà bạn nghĩ.

Hai thanh cuộn được liên kết

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

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

Bản minh hoạ này có 3 thanh cuộn, mỗi thanh đại diện cho một kênh màu khác nhau 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à bạn có thể truy xuất dữ liệu từ một biểu mẫu bao bọc các 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, đó 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ó một thước có thể cuộn được để thay thế cách chọn độ dài cho dữ liệu đầu vào dạng số. Nhập giá trị trực tiếp vào ô nhập số hoặc di chuyển đến kích thước. Sự kiện thay đổi được 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 bao 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). Duy nhất một scrollSnapChanging dùng để ẩn tiêu đề album và scrollSnapChange dùng để trình bày tiêu đề. Các sự kiện này giúp sắp xếp việc ẩn tiêu đề cũ và hiển thị tiêu đề mới một cách linh hoạt.

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 là điều không hề khó khă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 lười, còn gọi là kết xuất được kích hoạt bằng snapchange hoặc tìm nạp dữ liệu.
• Hình thu nhỏ của dải phim được 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 bằng cuộn
• Giao diện người dùng/trải nghiệm người dùng của Wheel of Fortune
• Mục tiêu chụp nhanh sẽ có chú giải công cụ được neo.
• Nhấn để chụp nhanh
• Nhấn để xem
• Âm thanh khi chụp nhanh
• 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 mong được biết những gì bạn xây dựng bằng các API mới này và hy vọng những API này sẽ giúp đơn giản hoá trải nghiệm cuộn của bạn.

Tài nguyên:

• Thông số kỹ thuật CSS
• Video giải thích về tính năng Cuộn nhanh
• Sự kiện chụp nhanh MDN
• Bộ sưu tập CodePen