Thuộc tính overscroll-behavior-block CSS

Trang trước overscroll-behavior
Trang tiếp theo overscroll-behavior-inline

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

overscroll-behavior-block Thuộc tính này đượ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) trên phần tử khi cố gắng cuộn vượt quá giới hạn cuộn theo hướng khối.

Chuỗi cuộn là khi cuộn quá mức trên một phần tử sẽ gây ra hành vi cuộn của phần 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 khi người dùng cố gắng cuộn ra ngoài giới hạn cuộn. Ví dụ, trên thiết bị di động, khi cố gắng cuộn ra ngoài phần trên của trang, thường sẽ có phản hồi thị giác khi trang được làm mới.

CSS của overscroll-behavior-block và overscroll-behavior-inline Thuộc tính tương ứng với overscroll-behavior-x và overscroll-behavior-y Thuộc tính rất相似, nhưng overscroll-behavior-block và overscroll-behavior-inline Thuộc tính phụ thuộc vào hướng khối và hướng nội.

Lưu ý:Thuộc tính CSS liên quan writing-mode Định nghĩa hướng khối. Điều này ảnh hưởng đến hướng khối là theo hướng x hay hướng y, cũng như overscroll-behavior-block Kết quả của thuộc tính. Đối với trang tiếng Anh, hướng khối là xuống, hướng nội là từ trái sang phải.

Mô hình

Ví dụ 1

Tắt chuỗi cuộn cuộn trên phần tử <div> cuộn được tắt theo hướng khối:

#yellowDiv {
  overscroll-behavior-block: contain;
}

Thử ngay

Ví dụ 2: Kết hợp thuộc tính writing-mode

Đặt phần tử <div> của bạn writing-mode Khi thuộc tính giá trị được đặt thành 'vertical-rl', hướng khối sẽ trở thành hướng x, vì vậy overscroll-behavior-block Bây giờ hoạt động theo hướng x而不是 hướng y:

#yellowDiv {
  writing-mode: vertical-rl;
  overscroll-behavior-block: contain;
}

Thử ngay

Cú pháp CSS

overscroll-behavior-block: 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
Cú pháp JavaScript:	object.style.overscrollBehaviorBlock="none"