Các scroll-behaviorbất động sản trong CSS cho phép chúng ta xác định xem vị trí cuộn của trình duyệt nhảy đến một vị trí mới hoặc nhẹ nhàng sinh động quá trình chuyển đổi khi người dùng nhấp vào một liên kết mà mục tiêu một vị trí neo trong một hộp di chuyển.
html ( scroll-behavior: smooth; )Giải thích sâu hơn
Chờ đã, chúng ta nói đến hộp cuộn này là gì? Đó là một phần tử có nội dung vượt quá giới hạn của nó.
Xem Hộp cuộn bút bằng CSS-Tricks (@ css-trick) trên CodePen.
Lưu ý rằng hộp trong bản demo trên có chiều cao cố định 200pxnhư thế nào? Bất kỳ nội dung nào vượt quá chiều cao đó đều nằm ngoài giới hạn của hộp và chúng tôi đã thêm overflow-y: scrollđể làm cho nội dung bổ sung đó có thể truy cập được bằng cách cuộn dọc. Đó là những gì chúng tôi có nghĩa là của một hộp cuộn.
Bây giờ, giả sử chúng ta thêm một điều hướng vào đầu hộp với mỗi liên kết nhắm mục tiêu ba phần nội dung:
Xem Hộp cuộn bút w / Điều hướng bằng CSS-Tricks (@ css-trick) trên CodePen.
Mỗi liên kết đưa người dùng trực tiếp đến các phần nội dung khác nhau bên trong hộp cuộn. Theo mặc định, quá trình chuyển đổi giữa là một bước nhảy đột ngột.
Kiểu nhảy như vậy có thể gây chói tai. Đó là nơi scroll-behaviorxuất hiện và cho phép chúng tôi thiết lập chuyển đổi cuộn mượt mà. Loại thứ này được sử dụng để sử dụng Javascript ưa thích nhưng scroll-behaviorsẽ cung cấp cho chúng tôi khả năng thực hiện điều đó tự nhiên trong CSS, khi hỗ trợ trình duyệt được cải thiện.
Cú pháp
.module ( scroll-behavior: ( auto | smooth ); )Giá trị
Các scroll-behaviorbất động sản chấp nhận hai giá trị, trong đó chủ yếu chuyển đổi các mịn tính năng di chuyển và tắt.
auto(mặc định): Giá trị này cho phép nhảy đột ngột giữa các phần tử trong hộp cuộn.smooth: Đúng như tên gọi của nó, giá trị này là sự chuyển đổi hoạt ảnh mượt mà giữa các phần tử trong hộp cuộn.
Bản giới thiệu
Bản trình diễn sau sẽ chỉ hoạt động trên Chrome 61+, Firefox 36+ và Opera 48+ tại thời điểm viết bài này.
Xem Hộp cuộn bút w / `scroll-behavior` bằng CSS-Tricks (@ css-trick) trên CodePen.
Hỗ trợ trình duyệt
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 61 | 36 | Không | 79 | Không |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Không |
Thêm thông tin
- Mô-đun xem CSSOM: Đặc tả nháp, bao gồm thuộc tính CSS. Bản dự thảo hiện tại bao gồm một khuyến nghị chuyển
scroll-behaviorsang thông số kỹ thuật khác, vì vậy sẽ rất thú vị khi xem nó hạ cánh ở đâu. - Mạng nhà phát triển Mozilla: Tham chiếu MDN cho đặc điểm kỹ thuật
- Trạng thái nền tảng Microsoft Edge: Hiện đang hiển thị trạng thái của tính năng này là Đang xem xét
- Trạng thái nền tảng Chrome: Hiện đang hiển thị trạng thái của tính năng này là Đang phát triển và bao gồm trạng thái dành cho các nền tảng khác như một
- Đoạn mã cuộn mượt mà: Đoạn mã cho phép cuộn mượt mà với Javascript và jQuery
- Khả năng truy cập và cuộn mượt mà: Bài đăng về Thủ thuật CSS về tác động của khả năng cuộn mượt mà hỗ trợ Javascript