LÀM THẾ NÀO ĐỂ - Ẩn Thanh cuộn
Tìm hiểu cách ẩn thanh cuộn bằng CSS.
Cách ẩn thanh cuộn
Thêm overflow: hidden;
để ẩn cả thanh cuộn ngang và dọc.
Thí dụ
body {
overflow: hidden; /* Hide scrollbars */
}
Để chỉ ẩn thanh cuộn dọc hoặc chỉ thanh cuộn ngang, hãy sử dụng overflow-y
hoặc overflow-x
:
Thí dụ
body {
overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */
}
Lưu ý rằng điều đó overflow: hidden
cũng sẽ loại bỏ chức năng của thanh cuộn. Không thể cuộn bên trong trang.
Mẹo: Để tìm hiểu thêm về thuộc overflow
tính, hãy đi tới Hướng dẫn tràn CSS hoặc Tham khảo thuộc tính tràn CSS của chúng tôi .
Ẩn thanh cuộn nhưng vẫn giữ chức năng
Để ẩn các thanh cuộn, nhưng vẫn có thể tiếp tục cuộn, bạn có thể sử dụng mã sau:
Thí dụ
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar
for IE, Edge and Firefox */
.example {
-ms-overflow-style: none; /*
IE and Edge */
scrollbar-width: none; /* Firefox */
}
Các trình duyệt Webkit, chẳng hạn như Chrome, Safari và Opera, hỗ trợ ::-webkit-scrollbar
phần tử giả không chuẩn, cho phép chúng tôi sửa đổi giao diện của thanh cuộn của trình duyệt. IE và Edge hỗ trợ thuộc -ms-overflow-style:
tính và Firefox hỗ trợ thuộc scrollbar-width
tính, cho phép chúng tôi ẩn thanh cuộn nhưng vẫn giữ nguyên chức năng.