overscroll-behavior-x

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-x xác định hành vi của trình duyệt khi ranh giới theo chiều ngang của vùng cuộn được chạm đến.

Xem overscroll-behavior để biết giải thích đầy đủ.

Cú pháp

css

/* Giá trị từ khóa */
overscroll-behavior-x: auto; /* default */
overscroll-behavior-x: contain;
overscroll-behavior-x: none;

/* Giá trị toàn cục */
overscroll-behavior-x: inherit;
overscroll-behavior-x: initial;
overscroll-behavior-x: revert;
overscroll-behavior-x: revert-layer;
overscroll-behavior-x: unset;

Thuộc tính overscroll-behavior-x đượ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ị contain vô 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-x = 
  contain  |
  none     |
  auto

Trong ví dụ overscroll-behavior-x của chúng ta (xem thêm mã nguồn), chúng ta có hai hộp cấp khối, một nằm trong hộp kia. Hộp ngoài có width lớn được đặt để trang cuộn theo chiều ngang. Hộp trong có chiều rộng nhỏ (và height) để nó nằm gọn trong viewport, nhưng nội dung của nó có width lớn nên nó sẽ cuộn theo chiều ngang.

Theo mặc định, khi hộp trong được cuộn và ranh giới cuộn được chạm đến, toàn bộ trang sẽ bắt đầu cuộn, điều này có thể không mong muốn. Để tránh điều này, bạn có thể đặt overscroll-behavior-x: contain trên hộp trong:

css

main > div {
  height: 300px;
  width: 500px;
  overflow: auto;
  position: relative;
  top: 100px;
  left: 100px;
  overscroll-behavior-x: contain;
}