Thuộc tính overflow-anchor trong CSS
Bùi Tấn Lực - 880
- 11/10/2025
Chức năng của Thuộc tính overflow-anchor trong CSS
Thuộc tính overflow-anchor trong CSS dùng để bật tắt tính năng neo cuộn sau khi thêm nội dung mới vào bằng javascript, auto sẽ bật tính năng neo cuộn, none sẽ tắt tính năng neo cuộn, tính năng neo cuộn sẽ giúp sau khi nhấn thêm nội dung vào thẻ div thì màn hình lúc xem nội dung thẻ div sẽ không thay đổi sau khi thêm.
Cú pháp của Thuộc tính overflow-anchor trong CSS
overflow-anchor: giatri;
giatri: Giá trị để bật tắt tính năng neo cuộn (Ví dụ: auto, none)
Các giá trị của Thuộc tính overflow-anchor trong CSS
auto: Bật tính năng neo cuộn.
none: Tắt tính năng neo cuộn.
Code Thuộc tính overflow-anchor trong CSS
overflow-anchor: auto;
overflow-anchor: none;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính overflow-anchor trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#div-auto, #div-none {width:40%; float:left; height:150px; background:#ddd; margin-right:5%; padding:10px; margin-bottom:15px;overflow: scroll;}
</style>
</head>
<body>
<h1>Code Thuộc tính overflow-anchor trong CSS</h1>
<p>Dùng để bật tắt tính năng neo cuộn sau khi thêm nội dung mới vào bằng javascript, auto sẽ bật tính năng neo cuộn, none sẽ tắt tính năng neo cuộn, tính năng neo cuộn sẽ giúp sau khi nhấn thêm nội dung vào thẻ div thì màn hình lúc xem nội dung thẻ div sẽ không thay đổi sau khi thêm:</p>
<div id="div-auto" style="overflow-anchor: auto;">
<h3>overflow-anchor: auto;</h3>
<div id="them-auto"></div>
<p>
Hãy Chạy thử Code Thuộc tính overflow-anchor trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả
</p>
<button onclick="themNoiDung()">THÊM NỘI DUNG</button>
</div>
<div id="div-none" style="overflow-anchor: none;">
<h3>overflow-anchor: none;</h3>
<div id="them-none"></div>
<p>
Hãy Chạy thử Code Thuộc tính overflow-anchor trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả
</p>
<p>
Hãy Chạy thử Code Thuộc tính overflow-anchor trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả
</p>
<button onclick="themNoiDung2()">THÊM NỘI DUNG</button>
</div>
<script>
function themNoiDung() {
// Tạo node (nút) p
const node = document.createElement("p");
// Tạo nút văn bản
const textnode = document.createTextNode("Nội dung mới");
// Thêm nút văn bản vào nút phần tử html
node.appendChild(textnode);
// Thêm nút phần tử HTML vào cuối div
document.getElementById("them-auto").appendChild(node);
}
function themNoiDung2() {
// Tạo node (nút) p
const node = document.createElement("p");
// Tạo nút văn bản
const textnode = document.createTextNode("Nội dung mới");
// Thêm nút văn bản vào nút phần tử html
node.appendChild(textnode);
// Thêm nút phần tử HTML vào cuối div
document.getElementById("them-none").appendChild(node);
}
</script>
</body>
</html>
Ứng dụng overflow-anchor trong thực tế
overflow-anchor phát huy tác dụng rõ nhất ở những trang có nội dung thay đổi sau khi người dùng đã bắt đầu cuộn. Thay vì để trình duyệt tự xử lý trong mọi trường hợp, thuộc tính này cho phép kiểm soát việc giữ ổn định vị trí hiển thị khi cấu trúc nội dung thay đổi.
Giữ vị trí cuộn khi nội dung được tải động
Khi một phần nội dung được tải thêm ở phía trên vùng đang xem, chiều cao của trang có thể thay đổi và làm vị trí hiển thị bị dịch chuyển. Điều này thường xuất hiện ở trang tin tức, danh sách dữ liệu, khu vực bình luận hoặc các thành phần được tải bất đồng bộ.
Trong những trường hợp phù hợp, trình duyệt có thể sử dụng cơ chế scroll anchoring để giữ khu vực người dùng đang theo dõi ở vị trí ổn định. overflow-anchor cho phép xác định một phần tử có được tham gia vào cơ chế neo cuộn này hay không.
.content {
overflow-anchor: auto;
}
Giá trị auto cho phép phần tử tham gia cơ chế neo cuộn theo cách xử lý thông thường của trình duyệt. Đây thường là lựa chọn phù hợp khi không có lý do đặc biệt để can thiệp.
Ngăn trang bị nhảy khi thêm nội dung mới
Một vấn đề dễ nhận thấy là người dùng đang đọc một đoạn văn nhưng nội dung mới xuất hiện phía trên khiến đoạn đang đọc bị đẩy xuống. Với các giao diện cập nhật liên tục, hiện tượng này có thể làm trải nghiệm đọc trở nên khó chịu.
Thay vì chỉ cố định vị trí bằng JavaScript, có thể để trình duyệt xử lý việc neo cuộn và chỉ điều chỉnh overflow-anchor ở những phần tử gây ra hành vi không mong muốn.
Ví dụ, nếu một thành phần không nên được dùng làm điểm neo, có thể thiết lập:
.dynamic-content {
overflow-anchor: none;
}
Cách này hữu ích khi một khu vực thường xuyên thay đổi kích thước và việc chọn nó làm điểm neo có thể khiến vị trí cuộn không ổn định. Tuy nhiên, không nên đặt none tùy tiện cho toàn bộ trang vì có thể làm mất lợi ích của cơ chế giữ vị trí cuộn.
Khi nào nên sử dụng overflow-anchor: none
overflow-anchor: none phù hợp khi một phần tử có những thay đổi về kích thước hoặc nội dung và bạn không muốn nó trở thành điểm tham chiếu cho việc duy trì vị trí cuộn.
Thuộc tính này có thể cân nhắc trong các khu vực như nội dung tải động, thành phần quảng cáo thay đổi kích thước hoặc giao diện có phần tử được chèn thêm theo thời gian. Trước khi sử dụng, nên kiểm tra trực tiếp hành vi cuộn để tránh vô tình làm trải nghiệm trên trang kém ổn định.
.ads {
overflow-anchor: none;
}
Điểm quan trọng là overflow-anchor: none không có nghĩa là khóa thanh cuộn hay ngăn người dùng cuộn trang. Nó chỉ loại phần tử đó khỏi việc được chọn làm điểm neo trong cơ chế scroll anchoring. Vì vậy, nên sử dụng ở đúng khu vực cần kiểm soát thay vì áp dụng đại trà.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính overflow-anchor trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
