Giới Thiệu Về Scroll Snap Points Trong CSS

CSS Scroll Snap Points là gì?

CSS Scroll Snap Module là chuẩn web giúp chúng ta điều khiển hoạt động scroll trên một trang web để giới hạn người dùng scroll chỉ đến một phần của trang web.

Scrolling (Cuộn) là một trong những hành động được thực hiện nhiều nhất trên một trang web. Các trình duyệt, trong nhiều năm qua, đã cải thiện hiệu suất scroll của mình để phù hợp với độ cuộn rất nhanh của ngón tay. Đồng thời, các nhà phát triển đã sử dụng cuộn một cách sáng tạo để tạo nên trải nghiệm người dùng tốt hơn, vượt trội hơn.

Tuy nhiên, khi nhắc đến mối tương quan giữa coding và scrolling, dường như chỉ JavaScript cung cấp cho chúng ta những tùy chọn kiểm soát đặc biệt cho hoạt động scroll. Tình hình này đã diễn ra trong một thời gian kha dài, nhưng với sự ra đời của scroll snap point, CSS đang bắt đầu bắt kịp xu hướng.

Scroll không có scroll snap points

Hãy tưởng tượng bạn đang cuộn qua một loạt hình ảnh sản phẩm trên một trang web, hoặc một bộ sưu tập ảnh hoặc slide trực tuyến. Điều bạn thích thú trong các ứng dụng đó là bạn có thể xem toàn bộ sản phẩm, ảnh hoặc trượt mỗi khi bạn scroll, chứ không chỉ là một phần của sản phẩm, hình ảnh hoặc slide.

Ví dụ, trên bản demo bên dưới, bạn có thể thấy bất cứ khi nào người dùng dừng scroll, chỉ khoảng một nửa hình ảnh được hiển thị ở dưới cùng của màn hình. Tuy nhiên, hầu hết người dùng muốn xem đầy đủ hình ảnh cuối cùng .

Scrolling khi có scroll snap points

Đây là lúc chúng ta sẽ dùng CSS scroll snap points. Đây là một chuẩn CSS cho phép chúng ta cố định vị trí cho hoạt động scrolling. Ta sẽ có 5 thuộc tính CSS cấu thành chuẩn này.

1. scroll-snap-type
2. scroll-snap-points-x
3. scroll-snap-points-y
4. scroll-snap-coordinate
5. scroll-snap-destination

Browser support

Các thuộc tính cần tiền tố -webkit và -ms để hoạt động đúng trên trình duyệt. Tại thời điểm viết bài, CSS scroll snap không được hỗ trợ cho Chrome và Opera.

Một điểm cần lưu ý là bốn thuộc tính nằm cuối bên trên có khả năng bị user agents drop khá cao . Thay vào đó chúng ta sẽ có những thuộc tính mới là scroll-snap-align, scroll-snap-margin, và scroll-snap-padding, theo như các thông số ở đây.

Các thuộc tính mới sẽ có vai trò không đổi so với những người tiền nhiệm. Hiện nay, các thuộc tính cũ vẫn hoạt động bình thường nhé.

Thuộc tính

Bạn cần thêm thuộc tính scroll-snap-type vào scroll container (container element với thành tố con overflow khi được scroll). Cường độ lúc dừng scroll sẽ được chỉ định tại đây. Container có thể chứa 3 giá trị:

1. mandatory – khi hành động scroll hoàn thành, người dùng sẽ "thắng" tại điểm dừng liên quan.
2. proximity – ít cứng nhắc hơn mandatory; UA sẽ tự quyết định sẽ "thắng" lại điểm chỉ định hay không.
3. none – Không giới hạn điểm dừng

Thuộc tính scroll-snap-points-x và scroll-snap-points-y cũng thuộc scroll container. Các thuộc tính này sẽ chỉ ra điểm tọa độ x-y cho điểm dừng. Giá trị của chúng được xác định bởi hàm repeat(). Ví dụ, nếu bạn muốn thêm điểm dừng tại điểm x dao động khoảng 100px bạn cần dùng luật scroll-snap-points-x: repeat(100px).

Tính chất scroll-snap-destination cũng được thêm vào scroll container. Tính chất này sẽ xác định một tọa độ trên container làm điểm dừng. Tại điểm dừng này con của container sẽ dừng đúng nơi chỉ định khi scroll.

Bạn có thể dùng tính chất scroll-snap-coordinate kết hợp với scroll-snap-destination. Bạn sẽ cần thêm tính chất này vào các thành phần con của container. scroll-snap-coordinate xác định tọa độ của các thành phần con, và sẽ phù hợp với tọa độ đích của scroll container tương ứng khi user scroll màn hành.

Lưu ý bạn không phải dùng tất cả các thuộc tính cùng một lúc. Chỉ có scroll-snap-type là bắt buộc. Cùng với đó, bạn có thể xác định từng điểm dừng riêng lẻ hoặc sử dụng tổ hợp tọa độ đích.

Code ví dụ

Dưới đây là đoạn mã ví dụ cho scroll container điển hình khi scroll theo chiều dọc & có vài hình ảnh bên trong. Kết quả từ bản demo này chính là hình ảnh mà bạn đã thấy ở đầu bài này.

HTML

1 2 3 4 5 6

<div>   <img src='Pizza.png' alt='pizza'>   <img src='Noodle.png' alt='noodle'>   <img src='Burger.png' alt='burger'>   <img src='Juice.png' alt='juice'> </div>

CSS

1 2 3 4 5 6 7 8 9 10 11

div {   width: 300px;   height: 300px;   overflow: auto;   ... } div > img {   width: 250px;   height: 150px;   ... }

Bây giờ, chúng ta sẽ thêm một số điểm dừng vào scroll container:

CSS

1 2 3 4 5 6

div {   width: 300px;   overflow: auto;   scroll-snap-points-y: repeat(150px);   scroll-snap-type: mandatory; }

Dưới đây, bạn có thể thấy output như thế nào khi đã thực hiện CSS snap points. Để ý khi nào hành động scroll dừng khi hình ảnh dưới cùng màn hình chỉ hiển thị một phần?  Hình ảnh sẽ hiển thị hoàn toàn sau khi scrollport dừng tại điểm dừng ngay bên trên nó.

Theo Hongkiat