Ẩn Scrollbar Của Phần Tử HTML Nhưng Vẫn Cuộn được - Viblo

Trang chủ » Thanh Cuộn (scrollbar) Là Gì » Ẩn Scrollbar Của Phần Tử HTML Nhưng Vẫn Cuộn được - Viblo

Có thể bạn quan tâm

+5 Cỡ chữ 18px Độ cao hàng 1.75 Mặc định Toàn màn hình

Màu nền

Đặt lại
  • Báo cáo
  • Thêm vào series của tôi

Bài đăng này đã không được cập nhật trong 5 năm

Đôi khi chúng ta cần ẩn thanh cuộn của phần tử HTML. Việc này nhằm tăng tính thẩm mỹ hay tuân theo thiết kế. Có nhiều cách để làm được nhưng dưới đây là một trong những cách đơn giản mình đã thử. Bằng cách sử dụng CSS với pseudo selector.

Để xuất hiện scrollbar, mình sử dụng max-height.

.box ul { max-height: 100px; overflow: auto; ... }

<div class="scroll"> <ul> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul> </div>

Bằng cách này trình duyệt tự động thêm scrollbar. Bây giờ mình sẽ thêm một số thuộc tính và pseudo để ẩn nó đi:

.box ul { width: 200px; max-height: 100px; background: orange; overflow: auto; overflow: -moz-scrollbars-none; -ms-overflow-style: none; } .box ul::-webkit-scrollbar { width: 0 !important; display: none; }

Một cách khác nữa là đẩy scroll sang phải ở child div.

.box { width: 200px; height: 100px; background: orange; overflow: hidden; } .box ul { height: 100%; margin-right: -20px; overflow-y: scroll; }

Kết quả là scrollbar đã ẩn đi nhưng vẫn scroll được.

Tham khảo: stackoverflow 😅

CSS HTML

All rights reserved

  • Báo cáo
  • Thêm vào series của tôi

Mục lục

Không có mục lục

Viblo Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn. Đăng nhập Đăng kí

Từ khóa » Thanh Cuộn (scrollbar) Là Gì