Một số vấn đề với scrollbar trên Firefox
Để có thể làm 1 thành phần trong trang có thể scroll được, ta thường set height và đặt giá trị overflow: auto hoặc scroll
Tuy nhiên điều đó làm scrollbar chiếm thêm 1 phần diện tích khi xuất hiện -> để giải quyết việc đó 1 là tăng width của div hoặc dùng thuộc tính overflow: overlay
* overflow: overlay – không được Firefox support nữa nên khi dùng sẽ không scroll được dẫn đền cần dùng overflow: auto cho toàn bộ browser và ta phải css cho các browser khác nhau
ở Chrome và các trình duyệt webkit ta có thể dùng các thuộc tính sau để chỉnh sửa scrollbar
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
/* Track */
::-webkit-scrollbar-track {
background: #fff;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #0D2F50;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #0D2F50;
}
Như đã đề cập ở tiêu đề thì Firefox không nhận các đoạn mã trên mà thay vào đó nó sử dụng :
scrollbar-color: #0D2F50 #fff; // màu của thumb và màu track
scrollbar-width: none; //auto, inherit, initial, none, revert, thin, unset
Đây là chia sẻ để áp dụng cho các trường hợp cần css cho phần scrollbar
