Thuộc tính 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:
#yellowDiv {
overscroll-behavior: 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
Thuộc overscroll-behavior
đượ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.
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.
Thuộc overscroll-behavior
là cách viết tắt của các thuộc tính sau:
Các giá trị cho thuộc tính overscroll-behavior
có thể được đặt theo nhiều cách khác nhau:
Nếu thuộc tính hành vi cuộn quá mức có hai giá trị:
- hành vi ghi đè: không chứa;
- hướng x: không có hành vi ghi đè
- hướng y: không có chuỗi cuộn, nhưng cho phép khả năng cuộn quá mức
Nếu thuộc tính hành vi cuộn quá mức có một giá trị:
- hành vi cuộn quá mức: chứa;
- không có chuỗi cuộn theo hướng x hoặc y, nhưng cho phép khả năng cuộn quá mức
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.overscrollBehavior="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 | 63.0 | 18.0 * | 59.0 | 16.0 | 50.0 |
* Trong Microsoft Edge, giá trị thuộc tính 'none' được coi là 'contain' và điều này không chính xác.
Cú pháp CSS
overscroll-behavior: 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ụ
Cú pháp hai giá trị
Với giá trị thuộc overscroll-behavior
được đặt thành 'không tự động', khả năng chi trả chuỗi cuộn và cuộn quá mức được phép theo hướng x, nhưng không theo hướng y:
#pinkDiv {
overcroll-behavior: auto none;
}
Hãy tự mình thử »Trang liên quan
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