Để ẩn thanh cuộn nhưng vẫn cho phép cuộn, dùng overflow: hidden trên body hoặc container, hoặc ẩn scrollbar nhưng vẫn cuộn được.
Cách 1: Ẩn hoàn toàn (Không cuộn được) - Ví dụ gốc
body {
height: 150vh;
width: 200vw;
overflow: hidden; /* Ẩn scrollbar VÀ ngăn cuộn */
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
Lưu ý: Cách này ngăn chặn hoàn toàn cuộn. Chỉ dùng cho trường hợp đặc biệt (modal, game canvas...).
Cách 2: Ẩn scrollbar nhưng VẪN CUỐN ĐƯỢC (Khuyến nghị)
/* Chrome, Safari, Edge, Opera */
.container::-webkit-scrollbar {
display: none; /* Hoặc width: 0; height: 0; */
}
/* Firefox */
.container {
scrollbar-width: none; /* 'thin' | 'auto' | 'none' */
}
/* IE 10+ */
.container {
-ms-overflow-style: none;
}
/* Kết hợp cho cross-browser */
.hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
Cách 3: Tùy chỉnh scrollbar (Thay vì ẩn)
Xem bài "Tạo custom scrollbar" để làm scrollbar đẹp thay vì ẩn.
Ứng dụng thực tế
- Modal/popup: ẩn scroll body khi modal mở
body { overflow: hidden; } - Carousel/slider ngang: ẩn scrollbar ngang
.slider { overflow-x: auto; scrollbar-width: none; } - Fullpage sections: cuộn bằng JS (wheel/touch) nhưng ẩn scrollbar