Thuộc tính khối hành vi cuộn quá mức CSS
Ví dụ
Tắt chuỗi cuộn cho phần tử <div> có thể cuộn theo hướng khối:
#yellowDiv {
overscroll-behavior-block: contain;
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
overscroll-behavior-block
được sử dụng để tắt chuỗi cuộn hoặc khả năng cuộn quá mức trên một phần tử khi bạn cố gắng cuộn qua ranh giới cuộn theo hướng khối.
Chuỗi cuộn là khi việc cuộn quá mức trên một phần tử sẽ dẫn đến hành vi cuộn trên phần tử gốc. Đây là hành vi mặc định.
Khả năng cuộn quá mức là một phản hồi cho người dùng khi cố gắng cuộn ra ngoài ranh giới cuộn. Ví dụ: phản hồi trực quan cùng với việc làm mới trang thường xảy ra trên thiết bị di động khi buộc phải cuộn ra ngoài đầu trang.
Các thuộc tính overscroll-behavior-block
và overscroll-behavior-inline
của CSS rất giống với các thuộc tính CSS overscroll-behavior-x
và overscroll-behavior-y
, nhưng các thuộc tính overscroll-behavior-block
và overscroll-behavior-inline
phụ thuộc vào khối và hướng dẫn nội tuyến.
Lưu ý: writing-mode
tính CSS liên quan xác định hướng khối. Điều này ảnh hưởng đến việc hướng khối theo hướng x hay hướng y và kết quả của thuộc overscroll-behavior-block
. Đối với các trang bằng tiếng Anh, hướng khối là hướng xuống và hướng nội tuyến là từ trái sang phải.
Giá trị mặc định: | tự động |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | KHÔNG. Đọc về hoạt hình |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.overscrollBehaviorBlock="none" Hãy dùng thử |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
overscroll-behavior-block | 63.0 | 18.0 | 59.0 | 16.0 | 50.0 |
Cú pháp CSS
overscroll-behavior-block: auto|contain|none|initial|inherit;
Giá trị tài sản
Value | Description |
---|---|
auto | Allows scroll chaining and overscroll affordance behavior. This is default |
contain | Allows overscroll affordance behavior, but not scroll chaining. |
none | Does not allow overscroll affordance or scroll chaining behavior. |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Với thuộc tính chế độ viết
Với giá trị thuộc writing-mode
của phần tử <div> được đặt thành 'vertical-rl', hướng khối theo hướng x và do đó khối hành vi cuộn quá mức hiện hoạt động theo hướng x thay vì y -phương hướng:
#yellowDiv {
writing-mode: vertical-rl;
overscroll-behavior-block: contain;
}
Hãy tự mình thử »Trang liên quan
Thuộc tính hành vi cuộn quá mức CSS: Thuộc tính hành vi cuộn quá mức CSS
Thuộc tính Overscroll-behavior-inline của CSS: Thuộc tính Overscroll-behavior-inline của CSS
Thuộc tính CSS overscroll-behavior-x: Thuộc tính CSS Overscroll-behavior-x
Thuộc tính CSS Overscroll-behavior-y: Thuộc tính CSS Overscroll-behavior-y
Thuộc tính hành vi cuộn CSS: Thuộc tính hành vi cuộn CSS
Thuộc tính lề cuộn CSS: Thuộc tính lề cuộn CSS
Thuộc tính đệm cuộn CSS: Thuộc tính đệm cuộn CSS
Thuộc tính CSS cuộn-snap-align: Thuộc tính CSS Scroll-snap-align
Thuộc tính chế độ viết CSS: Thuộc tính chế độ viết CSS