Các scrollbar-gutterbất động sản cung cấp sự linh hoạt để xác định cách không gian trình duyệt sử dụng để hiển thị một thanh cuộn mà tương tác với các nội dung trên màn hình. Thông số mô tả nó "dành không gian cho thanh cuộn" và điều đó có ý nghĩa vì đó rốt cuộc là máng xối: một vùng chứa dành không gian cho bất cứ thứ gì có trong đó và tách nó khỏi các phần tử khác.
Vì vậy, tất cả chúng ta đều ở trên cùng một trang, thanh cuộn thường nằm ở phía bên phải của trình duyệt (được gọi chính thức là “tác nhân người dùng” - hoặc UA - trong thông số kỹ thuật) cho biết vị trí cuộn của bạn so với tổng không gian có sẵn trên trang web.
Theo truyền thống, chúng thường là một thùng chứa trực quan với một chỉ báo trượt. Chúng được gọi là thanh cuộn cổ điển . Chỉ báo nằm bên trong rãnh nước và rãnh nước sẽ chiếm bất động sản vật lý trên màn hình khi nó được hiển thị.
Tuy nhiên, gần đây, sự xuất hiện của thanh cuộn có xu hướng tối giản hơn nhiều. Chúng tôi gọi đó là các thanh cuộn lớp phủ và chúng trong suốt một phần hoặc toàn bộ khi ngồi trên đầu nội dung trang. Nói cách khác, không giống như thanh cuộn cổ điển chiếm bất động sản vật lý trên màn hình, thanh cuộn lớp phủ nằm trên đầu nội dung màn hình.
Khi chúng tôi đang ở đó, một thanh cuộn có thể bật lên ở những nơi khác. Bên cạnh việc ngồi ở bên phải của trình duyệt, chúng ta sẽ thấy các thanh cuộn trên các phần tử HTML nơi nội dung tràn phần tử và thuộc overflowtính (hoặc overflow-xvà overflow-y) được đặt thành scrollgiá trị. Và lưu ý rằng sự tồn tại của overflow-xphương tiện chúng ta có cuộn ngang ngoài cuộn dọc.
Đó là những gì chúng ta đang nói về. Không phải bản thân chỉ báo, mà là vật chứa chứa nó. Đó là máng xối. Việc trình duyệt sử dụng thanh cuộn cổ điển hay lớp phủ hoàn toàn phụ thuộc vào chính UA. Đó không phải để chúng tôi quyết định. Điều này đúng với chiều rộng thanh cuộn. Tác nhân người dùng xác định điều đó và không cho chúng tôi kiểm soát nó.
Đó là nơi scrollbar-gutterxuất hiện. Chúng tôi có thể đánh vần xem máng xối có hiện diện trong các biến thể cổ điển và lớp phủ hay không.
Cú pháp
.my-element ( scrollbar-gutter: ( auto | ( stable | always ) && both? && force? ) )Dấu kép và (&&) phân tách hai hoặc nhiều thành phần, tất cả đều phải xuất hiện, theo bất kỳ thứ tự nào.
Dấu chấm hỏi (?) Cho biết loại, từ hoặc nhóm đứng trước là tùy chọn (xuất hiện 0 hoặc một lần).
Giá trị
auto(giá trị ban đầu): Khá nhiều hành vi mặc định được mô tả cho đến nay. Đặt thuộc tính thành giá trị này cho phép các thanh cuộn cổ điển sử dụng bất động sản trong giao diện người dùng trên các phần tử mà thuộcoverflowtính của các phần tử đó được đặt thànhscrollhoặcauto. Ngược lại, thanh cuộn lớp phủ hoàn toàn không chiếm không gian bằng cách nằm trên đầu phần tử.stable: Điều này bổ sung một chút hành vi cố chấp bằng cách luôn dành không gian cho rãnh của thanh cuộn, miễn là thuộcoverflowtính trên cùng một phần tử được đặt thànhscrollhoặcautovà chúng tôi đang xử lý thanh cuộn cổ điển - ngay cả khi hộp không bị tràn. Ngược lại, điều này sẽ không ảnh hưởng đến thanh cuộn lớp phủ.always: Điều này hoạt động giống nhưstablenhưng đảm bảo rằng không gian cho rãnh của thanh cuộn luôn được dành riêng, bất kể thanh cuộn là cổ điển hay lớp phủ và bất kể nội dung có tràn hay không.both: Điều này cho biết rằng rãnh nước thanh cuộn sẽ được đặt trên cả hai mặt của phần tử khi rãnh nước mặc định được hiển thị. Bạn có thể thấy điều này có thể hữu ích như thế nào nếu thiết kế của bạn yêu cầu khoảng cách bằng nhau trên cả hai mặt của phần tử.force: Đây là giống như áp dụng cả haistablevàalwaysnơi các yếu tố củaoverflowđược thiết lập đểauto,scroll,visible,hiddenhoặcclip.
Bản thảo làm việc của thông số kỹ thuật có một bảng siêu tiện dụng chia nhỏ các định nghĩa đó thành ngữ cảnh của chúng để hiển thị mối quan hệ giữa chúng với thanh cuộn cổ điển và lớp phủ.
| Thanh cuộn cổ điển | Lớp phủ thanh cuộn | ||||
|---|---|---|---|---|---|
| tràn ra | thanh cuộn-máng xối | Tràn | Không tràn | Tràn | Không tràn |
| cuộn giấy | Tự động | G | G | ||
| ổn định | GM | G | |||
| luôn luôn | G | G | G | G | |
| Tự động | G | ||||
| ổn định | G | G | |||
| luôn luôn | G | G | G | G | |
| hiển thị, ẩn, clip | Tự động | ||||
| ổn định | f? | f? | |||
| luôn luôn | f? | f? | f? | f? | |
“G” đại diện cho các trường hợp không gian được dành riêng cho rãnh thanh cuộn, “f?” các trường hợp trong đó không gian được dành riêng cho máng xối của thanh cuộn nếu lực lượng được chỉ định và các trường hợp ô trống trong đó không gian được dành riêng.
Trạng thái đặc điểm kỹ thuật
Các scrollbar-guttertài sản được quy định tại Cấp Overflow Module 4, mà là ở tình trạng Dự thảo làm việc. Điều đó có nghĩa là đây vẫn là một công việc đang được tiến hành và có thể thay đổi từ bây giờ đến thời điểm dự thảo chuyển sang Đề xuất ứng viên.
Đặc điểm kỹ thuật cấp độ 3 của mô-đun tràn cũng là một Bản thảo đang làm việc, vì vậy đó là một dấu hiệu tốt cho thấy (1) sẽ mất một thời gian scrollbar-gutterđể trở thành một đề xuất và (2) nó vẫn đang được tiến hành.
Hỗ trợ trình duyệt
Không có hỗ trợ trình duyệt tại thời điểm cập nhật cuối cùng.
Thêm thông tin
- Bản thảo làm việc CSS Overflow Module cấp 4
- GitHub Số 92
- Nhóm công tác CSS tại TPAC: Có gì mới trong CSS? Bao gồm đề xuất vẽ tay cho bảng phác thảo hành vi của các giá trị thuộc tính.