Thuộc tính overscroll-behavior của CSS

Định nghĩa và cách sử dụng

overscroll-behavior Thuộc tính được sử dụng để tắt chuỗi cuộn (scroll chaining) hoặc phản hồi cuộn quá mức (overscroll affordance) khi cố gắng cuộn ra ngoài biên giới cuộn.

Chuỗi cuộn: Khi cuộn quá mức trên một yếu tố, sẽ gây ra hành vi cuộn của yếu tố cha. Đây là hành vi mặc định.

Phản hồi cuộn quá mức: Là phản hồi được cung cấp cho người dùng khi cố gắng cuộn ra ngoài biên giới cuộn. Ví dụ, khi cố gắng cuộn ra ngoài phần trên của trang trên thiết bị di động, thường sẽ hiển thị phản hồi visuel và刷新 trang.

overscroll-behavior Thuộc tính là dạng viết tắt của các thuộc tính sau:}

overscroll-behavior Giá trị của thuộc tính có thể được thiết lập theo nhiều cách khác nhau:

Nếu thuộc tính overscroll-behavior có hai giá trị:

overscroll-behavior: none contain;
  • Hướng x: không có hành vi cuộn quá mức
  • Hướng y: không có chuỗi cuộn, nhưng cho phép phản hồi cuộn quá mức

Nếu thuộc tính overscroll-behavior có một giá trị:

overscroll-behavior: contain;
  • Hướng x và y: không có chuỗi cuộn, nhưng cho phép phản hồi cuộn quá mức

Mẫu

Ví dụ 1

Tắt chuỗi cuộn của phần tử <div> cuộn:

#yellowDiv {
  overscroll-behavior: contain;
}

Thử ngay

Ví dụ 2: Ngữ pháp kép:

Đặt overscroll-behavior Giá trị thuộc tính được thiết lập là auto noneCho phép chuỗi cuộn và phản hồi cuộn quá mức theo hướng x, nhưng không cho phép theo hướng y:

#pinkDiv {
  overscroll-behavior: auto none;
}

Thử ngay

Ngữ pháp CSS

overscroll-behavior: auto|contain|none|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
auto Cho phép hành vi chuỗi cuộn và phản hồi cuộn quá mức. Giá trị mặc định.
contain Cho phép hành vi phản hồi cuộn quá mức, nhưng không cho phép chuỗi cuộn.
none Không cho phép phản hồi cuộn quá mức hoặc hành vi chuỗi cuộn.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Thừa kế thuộc tính này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định: auto
Kế thừa: Không
Chế tạo animation: Không hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản: CSS3
Ngữ pháp JavaScript: object.style.overscrollBehavior="none"

Hỗ trợ trình duyệt

Số trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.

Chrome Edge Firefox Safari Opera
63.0 18.0 * 59.0 16.0 50.0

* Trong Microsoft Edge, giá trị thuộc tính 'none' được xử lý như 'contain', điều này là không đúng.

Trang liên quan

Tham khảo：Thuộc tính overscroll-behavior-x của CSS

Tham khảo：Thuộc tính overscroll-behavior-y của CSS

Tham khảo：Thuộc tính scroll-behavior của CSS

Tham khảo：Thuộc tính scroll-margin của CSS

Tham khảo：Thuộc tính scroll-padding trong CSS

Tham khảo：Thuộc tính scroll-snap-align trong CSS