Học cách sử dụng CSS để ẩn thanh cuộn.
- Trang trước Tạo thanh cuộn tùy chỉnh
- Trang tiếp theo Hiển thị/Đưa ra lệnh hiển thị thanh cuộn
Khóa học gợi ý:
Học cách sử dụng CSS để ẩn thanh cuộn.
Cách ẩn thanh cuộn overflow: hidden;thì có thể ẩn cả thanh cuộn ngang và dọc cùng một lúc.
Mẫu
body {
overflow: hidden; /* Ẩn thanh cuộn */
}
Nếu bạn muốn chỉ ẩn thanh cuộn dọc hoặc chỉ ẩn thanh cuộn ngang, hãy sử dụng overflow-y hoặc overflow-x:
Mẫu
body {
overflow-y: hidden; /* Ẩn thanh cuộn dọc */
overflow-x: hidden; /* Ẩn thanh cuộn ngang */
}
Lưu ý rằng,overflow: hidden Sẽ xóa chức năng của thanh cuộn. Không thể cuộn trong trang.
Ẩn thanh cuộn nhưng giữ lại chức năng
Để ẩn thanh cuộn nhưng vẫn có thể cuộn tiếp, bạn có thể sử dụng mã sau:
Mẫu
/* Ẩn thanh cuộn cho Chrome, Safari và Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Ẩn thanh cuộn cho IE, Edge và Firefox */
.example {
-ms-overflow-style: none; /* IE và Edge */
scrollbar-width: none; /* Firefox */
}
Trình duyệt Webkit (như Chrome, Safari và Opera) hỗ trợ không tiêu chuẩn ::-webkit-scrollbar Phụ tố ảo, cho phép chúng ta thay đổi外观 của thanh cuộn trình duyệt. IE và Edge hỗ trợ -ms-overflow-style: Firefox hỗ trợ Thuộc tính scrollbar-width Thuộc tính, những thuộc tính này cho phép chúng ta ẩn thanh cuộn nhưng vẫn giữ lại chức năng của nó.
Trang liên quan
Hướng dẫn:CSS tràn
Tài liệu tham khảo:Thuộc tính overflow của CSS
- Trang trước Tạo thanh cuộn tùy chỉnh
- Trang tiếp theo Hiển thị/Đưa ra lệnh hiển thị thanh cuộn
