Chiều rộng thanh cuộn - Thủ thuật CSS

Anonim

Các scrollbar-widthbất động sản trong CSS kiểm soát chiều rộng hoặc “độ dày” của một thanh cuộn. scrollbar-widthlà một phần của bản nháp Mô-đun Thanh cuộn cấp 1 của Nhóm làm việc CSS, vẫn đang trong quá trình hoàn thiện. Sự đồng thuận tại thời điểm viết bài này scrollbar-widthlà có khả năng sẽ được đưa vào các phiên bản CSS trong tương lai, nhưng vẫn còn tranh luận về việc liệu một đối số biến có được cho phép hay không, hoặc nếu các tùy chọn sẽ bị giới hạn ở các giá trị đặt trước (thêm về các giá trị sau) .

Điều chỉnh độ rộng của thanh cuộn đặc biệt quan trọng trên các trang hoặc giao diện người dùng có không gian hạn chế, nơi chỉ cắt bớt một vài pixel khỏi thanh cuộn (hoặc loại bỏ hoàn toàn) có thể cung cấp cho nội dung đủ chỗ để hấp dẫn mà không làm mất khả năng cuộn.

Ví dụ: hãy tưởng tượng một giao diện chỉnh sửa văn bản mà các nhu cầu phải vừa với một vùng chứa ngắn và hẹp. Trong tình huống như vậy, thanh cuộn có thể chiếm nhiều không gian có sẵn:

với scrollbar-width: auto;

Với scrollbar-width, chúng ta có thể đặt chiều rộng thành thinđể tiết kiệm không gian:

.scrollable-element ( scrollbar-width: thin; )
textarea với scrollbar-width: thin;

Hoặc, chúng tôi có thể đặt chiều rộng thành noneđể xóa hoàn toàn, tiết kiệm nhiều không gian hơn (giả sử chúng tôi ổn với việc thanh cuộn biến mất):

.scrollable-element ( scrollbar-width: none; )
textareavới scrollbar-width: none;- và bạn vẫn có thể cuộn!

Cú pháp

scrollbar-width: auto | thin | none | ;

Giá trị

scrollbar-width chấp nhận các giá trị sau:

  • auto là giá trị mặc định và sẽ hiển thị các thanh cuộn tiêu chuẩn cho tác nhân người dùng.
  • thin sẽ yêu cầu tác nhân người dùng sử dụng thanh cuộn mỏng hơn, khi có thể.
  • none sẽ ẩn hoàn toàn thanh cuộn mà không ảnh hưởng đến khả năng cuộn của phần tử.
  • đang được tranh luận, nhưng (nếu được thêm vào) sẽ là chiều rộng tối đa của thanh cuộn.

Thí dụ

Hỗ trợ trình duyệt

Điều này dành cho khả năng tùy chỉnh tổng thể của thanh cuộn. Để đặt cược tốt nhất cho bạn tạo kiểu trình duyệt chéo thanh cuộn, hãy xem tại đây.

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Trình duyệt Chrome Firefox I E Cạnh Safari
91 * 87 11 88 * TP *

Di động / Máy tính bảng

Chrome dành cho Android Android Firefox Android iOS Safari
88 * Không 81 * 14.0-14.4 *

Có liên quan

  • scrollbar-gutter
  • scrollbar-color
  • scrollbar

Tài nguyên

  • Bản nháp mô-đun CSSWG Scrollbars
  • Bộ sưu tập các ca sử dụng W3C để sửa đổi thanh cuộn
  • Tương lai của CSS: Thanh cuộn trên dev.to
  • w3c Github thảo luận về kiểm soát độ rộng thanh cuộn