CSS Scroll Snap module là một tính năng tích hợp sẵn trong CSS. Nó cho phép kiểm soát hành vi cuộn của các phần tử. Tính năng này giới thiệu phương pháp cuộn mới, nơi khung nhìn "bắt dính" vào các điểm xác định trước.
Điều này đảm bảo nội dung căn chỉnh hoàn hảo sau thao tác cuộn. Nó cải thiện trải nghiệm người dùng trên thiết bị cảm ứng, băng chuyền và vùng cuộn khác.
Trước Scroll Snap module, có Scroll Snap Point tương tự. Nó đã bị loại bỏ và thay thế bằng Scroll Snap module mạnh mẽ hơn trong HTML5.
CSS Scroll Snap Properties
Scroll Snap module được chia thành hai phần chính:
- Properties for Scroll Containers: Chúng áp dụng cho vùng chứa cha giữ nội dung có thể cuộn.
- Properties for Children of Scroll Containers:Chúng áp dụng cho các phần tử con bên trong vùng chứa. Bạn có thể kiểm soát hành vi bắt dính của chúng.
CSS Properties for Scroll Containers
| Properties | Description |
|---|---|
| scroll-snap-type | Thuộc tính này xác định mức độ bắt buộc của các điểm bắt dính trên vùng chứa cuộn. |
| scroll-snap-stop | Thuộc tính này xác định vùng chứa cuộn có được "vượt qua" các vị trí bắt dính hay không. |
| scroll-padding | Đây là thuộc tính viết tắt, nó xác định tất cả các thuộc tính scroll-padding-*. |
| scroll-padding-top | Thuộc tính này xác định khoảng cách trên cùng của vùng xem tối ưu của scrollport. |
| scroll-padding-right | Thuộc tính này xác định khoảng cách bên phải của vùng xem tối ưu của scrollport. |
| scroll-padding-bottom | Thuộc tính này xác định khoảng cách dưới cùng của vùng xem tối ưu của scrollport. |
| scroll-padding-left | Thuộc tính này xác định khoảng cách bên trái của vùng xem tối ưu của scrollport. |
| scroll-padding-inline | Đây là thuộc tính viết tắt, nó thiết lập scroll-padding cho chiều inline. |
| scroll-padding-inline-start | Thuộc tính này xác định khoảng cách lề bắt đầu theo chiều inline của vùng xem. |
| scroll-padding-inline-end | Thuộc tính này xác định khoảng cách lề kết thúc theo chiều inline của vùng xem. |
| scroll-padding-block | Đây là thuộc tính viết tắt, nó thiết lập scroll-padding cho chiều block. |
| scroll-padding-block-start | Thuộc tính này xác định khoảng cách lề bắt đầu theo chiều block của vùng xem. |
| scroll-padding-block-end | Thuộc tính này xác định khoảng cách lề kết thúc theo chiều block của vùng xem. |
CSS Properties for Children of Scroll Containers
| Properties | Description |
|---|---|
| scroll-snap-align | Thuộc tính này xác định vị trí bắt dính của hộp. Nó là sự căn chỉnh của vùng bắt dính. |
| scroll-margin | Đây là thuộc tính viết tắt, nó xác định tất cả các thuộc tính scroll-margin. |
| scroll-margin-top | Thuộc tính này xác định lề trên cùng của vùng bắt dính. Nó được dùng để bắt dính hộp này vào snapport. |
| scroll-margin-right | Thuộc tính này xác định lề phải của vùng bắt dính. Nó được dùng để bắt dính hộp này vào snapport. |
| scroll-margin-bottom | Thuộc tính này xác định lề dưới cùng của vùng bắt dính. Nó được dùng để bắt dính hộp này vào snapport. |
| scroll-margin-left | Thuộc tính này xác định lề trái của vùng bắt dính. Nó được dùng để bắt dính hộp này vào snapport. |
| scroll-margin-inline | Đây là thuộc tính viết tắt, nó thiết lập scroll-margin cho chiều inline. |
| scroll-margin-inline-start | Thuộc tính này xác định lề của vùng bắt dính ở đầu chiều inline. |
| scroll-margin-inline-end | Thuộc tính này xác định lề của vùng bắt dính ở cuối chiều inline. |
| scroll-margin-block | Đây là thuộc tính viết tắt, nó thiết lập scroll-margin cho chiều block. |
| scroll-margin-block-start | Thuộc tính này xác định lề của vùng bắt dính ở đầu chiều block. |
| scroll-margin-block-end | Thuộc tính này xác định lề của vùng bắt dính ở cuối chiều block. |
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Safari
- Opera