overscroll-behavior-y
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2022.
Thuộc tính CSS overscroll-behavior-y xác định hành vi của trình duyệt khi ranh giới theo chiều dọc của vùng cuộn được chạm đến.
Xem overscroll-behavior để biết giải thích đầy đủ.
Cú pháp
/* Giá trị từ khóa */
overscroll-behavior-y: auto; /* default */
overscroll-behavior-y: contain;
overscroll-behavior-y: none;
/* Giá trị toàn cục */
overscroll-behavior-y: inherit;
overscroll-behavior-y: initial;
overscroll-behavior-y: revert;
overscroll-behavior-y: revert-layer;
overscroll-behavior-y: unset;
Thuộc tính overscroll-behavior-y được chỉ định là một từ khóa được chọn từ danh sách giá trị bên dưới.
Giá trị
auto-
Hành vi tràn cuộn mặc định xảy ra như bình thường.
contain-
Hành vi tràn cuộn mặc định (ví dụ: hiệu ứng "nảy") được quan sát bên trong phần tử nơi giá trị này được đặt. Tuy nhiên, không có chuỗi cuộn nào xảy ra trên các vùng cuộn lân cận; các phần tử bên dưới sẽ không cuộn. Giá trị
containvô hiệu hóa điều hướng trình duyệt gốc, bao gồm cử chỉ kéo để làm mới theo chiều dọc và điều hướng vuốt theo chiều ngang. none-
Không có chuỗi cuộn nào xảy ra đến các vùng cuộn lân cận, và hành vi tràn cuộn mặc định bị ngăn chặn.
Định nghĩa chính thức
| Initial value | auto |
|---|---|
| Applies to | non-replaced block-level elements and non-replaced inline-block elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Cú pháp chính thức
overscroll-behavior-y =
contain |
none |
auto
Ví dụ
Ngăn phần tử bên dưới cuộn theo chiều dọc
.messages {
height: 220px;
overflow: auto;
overscroll-behavior-y: contain;
}
Xem overscroll-behavior để biết ví dụ và giải thích đầy đủ.
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| CSS Overscroll Behavior Module Level 1 # overscroll-behavior-longhands-physical |