Thuộc tính scroll-padding-block-start trong CSS

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

scroll-padding-block-start Thuộc tính này xác định khoảng cách từ vị trí bắt đầu của容器 đến vị trí hút của phần tử con theo hướng khối.

Điều này có nghĩa là, khi bạn dừng cuộn, cuộn sẽ điều chỉnh nhanh chóng và dừng lại ở khoảng cách được chỉ định giữa vị trí hút và容器的位置.

Hướng khối là hướng được đặt so với dòng hiện tại, hướng đặt của dòng tiếp theo. Đây cũng là cách đặt布局 của các thẻ có CSS display: block; (như thẻ <p> và <div>) trên trang web. Hướng khối phụ thuộc vào ngôn ngữ viết, ví dụ, dòng mới của tiếng Mông Cổ được sắp xếp từ trái sang phải, vì vậy hướng khối là từ trái sang phải, trong khi hướng khối của trang web tiếng Anh là xuống dưới. Hướng khối có thể được điều chỉnh qua thuộc tính CSS writing-mode để định nghĩa.

Vị trí dính là vị trí khi bạn dừng cuộn, phần tử con sẽ dính vào vị trí trong container.

Lưu ý:Thuộc tính này chỉ trong hướng khối scroll-snap-align Thuộc tính được thiết lập thành 'start' mới có hiệu lực.

để nhìn thấy scroll-padding-block-start trên elemen cha, phải thiết lập scroll-snap-align Thuộc tính, và thiết lập thuộc tính scroll-padding-block-startscroll-snap-type Thuộc tính.

Mô hình

Ví dụ 1

Đặt lề cuộn theo hướng khối từ vị trí bắt đầu của container đến vị trí dính là 20px:

div {
  scroll-padding-block-start: 20px;
}

Thử nghiệm trực tiếp

Ví dụ 2: Thư viện ảnh

Trong thư viện ảnh có hành vi dính, có thể sử dụng scroll-padding-block-start Thuộc tính này sẽ đẩy ảnh đến dưới elemen cố định:

#container {
  scroll-padding-block-start: 30px;
}

Thử nghiệm trực tiếp

Ví dụ 3

Khi elemen chứa writing-mode Khi thuộc tính giá trị được thiết lập thành vertical-rl, vị trí bắt đầu của container theo hướng khối và các phần tử con từ trên xuống phải. Điều này sẽ ảnh hưởng đến hành vi dính khi cuộn và scroll-padding-block-start Cách hoạt động của thuộc tính:

#container {
  scroll-padding-block-start: 20px;
  writing-mode: vertical-rl;
}

Thử nghiệm trực tiếp

Cú pháp CSS

scroll-padding-block-start: auto|value|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
auto Giá trị mặc định. Trình duyệt tính toán lề trong.
length

Định nghĩa giá trị scroll-padding-block-start, đơn vị là px, pt, cm, v.v.

Không được phép sử dụng giá trị âm. Xem thêm:Đơn vị CSS.

% Định nghĩa lề trong nội bộ phần tử bằng phần trăm chiều rộng của phần tử bao gồm.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Thực thị thuộc tính này từ elemen 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.scrollPaddingBlockStart="20px"

Hỗ trợ trình duyệt

Số 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
69.0 79.0 68.0 15.0 56.0

Trang liên quan

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

Tham khảo:Thuộc tính scroll-snap-type trong CSS

Tham khảo:Thuộc tính writing-mode trong CSS