Các overflow-anchorbất động sản cho phép chúng ta chọn không sử dụng Scroll neo, mà là một tính năng trình duyệt nhằm cho phép nội dung để tải trên vị trí DOM hiện tại của người dùng mà không thay đổi vị trí của người dùng khi nội dung đã được nạp đầy đủ.
Tại sao chúng ta cần nó
Scroll Anchoring là một tính năng của trình duyệt cố gắng ngăn chặn tình huống phổ biến trong đó bạn có thể cuộn xuống một trang web trước khi DOM được tải đầy đủ và khi có, bất kỳ phần tử nào tải phía trên vị trí hiện tại của bạn sẽ đẩy bạn xuống trang sâu hơn.
Nó có ý nghĩa tại sao điều này sẽ xảy ra. Có các thuộc tính CSS mà chúng tôi áp dụng cho các phần tử cung cấp cho chúng kích thước (ví dụ width), hình dạng (ví dụ transform) và vị trí (ví dụ margin). Nếu những phần tử đó chưa được tải vào thời điểm chúng tôi cuộn xuống trang, DOM sẽ tiếp tục tải chúng ngay cả khi chúng nằm ngoài khung nhìn hiện tại của chúng tôi và sẽ mở rộng về mặt vật lý để nhường chỗ cho những phần tử mới được tải đó. Khi DOM phát triển, vị trí của chúng tôi trên trang sẽ thay đổi để phù hợp với các yếu tố đó.
Scroll Anchoring ngăn trải nghiệm "nhảy" đó bằng cách khóa vị trí của người dùng trên trang trong khi các thay đổi đang diễn ra trong DOM phía trên vị trí hiện tại. Điều này cho phép người dùng duy trì vị trí của họ trên trang ngay cả khi các phần tử mới được tải vào DOM.
Các overflow-anchorbất động sản cho phép chúng ta opt-out của tính năng Scroll neo trong trường hợp nó được ưa thích để cho phép nội dung được tái dòng chảy như các yếu tố được nạp.
Cú pháp
article ( overflow-anchor: (auto | none ); )Giá trị
Các overflow-anchorbất động sản chấp nhận hai giá trị mà về cơ bản chuyển đổi hay không bật tính năng này.
auto(mặc định): Cho phép cuộn neo trên phần của trang hoặc phần tử mà nó được áp dụng.none: Tắt tính năng neo cuộn trong một phần hoặc toàn bộ trang web hoặc loại trừ các phần của DOM khỏi phần đang được neo, cho phép nội dung bắt đầu lại.
Bạn có thể áp dụng điều này cho body, nhưng bạn có thể phân bổ nó cho bất kỳ bộ chọn nào và nó sẽ có hiệu lực nếu phần tử đó cuộn.
Bản giới thiệu
Trong bản demo này, ngay sau khi bạn cuộn vào một trong các hộp, nó sẽ thêm một loạt các hộp màu xanh lục vào đầu div đó. Thông thường điều đó sẽ đẩy nội dung xuống ngay lập tức, có khả năng gây mất tập trung và mất vị trí của bạn trong văn bản. Với overflow-anchor: auto;, vị trí cuộn được giữ nguyên. overflow-anchor: none;cho phép các div mới được chèn vào ảnh hưởng đến vị trí cuộn.
Xem Bút ký chống tràn của Chris Coyier (@chriscoyier) trên CodePen.
Một điều khác có thể làm mà có thể cực kỳ hữu ích là ghim vị trí cuộn của một phần tử xuống dưới cùng. Ví dụ: một ứng dụng trò chuyện trong đó các tin nhắn mới được thêm vào DOM ở dưới cùng và bạn muốn vị trí cuộn ở cuối hiển thị tất cả các tin nhắn mới:
Xem Pen
"Stay at the bottom" cuộn bằng cuộn neo của Chris Coyier (@chriscoyier)
trên CodePen.
Hỗ trợ trình duyệt
Theo văn bản này, overflow-anchorkhông phải là Tiêu chuẩn W3C hiện tại, mặc dù báo cáo dự thảo của đặc điểm kỹ thuật được đề xuất có sẵn để đọc và đã được Chrome thông qua kể từ Phiên bản 56. Mozilla đang xem xét một tính năng tương tự trên Firefox. Khi nhiều trình duyệt hơn áp dụng tính năng Scroll Anchoring, chúng tôi có thể mong đợi thấy nhiều trình duyệt hỗ trợ hơn overflow-anchorvì nó cung cấp quyền kiểm soát rõ ràng để chọn không tham gia tính năng này.
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 |
|---|---|---|---|---|
| 56 | 66 | 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
- Scroll Anchoring: Dự thảo đề xuất về đặc điểm Scroll Anchoring
- Blog Chromium: Bài đăng trên blog thông báo về việc Chrome đưa tính năng Scroll Anchoring và thuộc tính CSS vào Phiên bản 56
- Bugzilla Ticket # 43114: Mở vé để đưa tài sản vào Firefox