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

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

scroll-padding-block Thuộc tính này chỉ định khoảng cách từ容器 đến vị trí dính của phần tử con trong hướng khối.

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

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

Vị trí dính là vị trí mà phần tử con dính vào trong容器的 vị trí khi bạn dừng cuộn.

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

scroll-padding-block Thuộc tính là tắt viết tắt của các thuộc tính sau:

• scroll-padding-block-start
• scroll-padding-block-end

scroll-padding-block Giá trị của thuộc tính có thể được thiết lập bằng nhiều cách:

Nếu thuộc tính scroll-padding-block có hai giá trị:

scroll-padding-block: 10px 50px;

• Khoảng cách từ đầu là 10px
• Khoảng cách từ cuối là 50px

Nếu thuộc tính scroll-padding-block có một giá trị:

scroll-padding-block: 10px;

• Khoảng cách từ đầu và cuối đều là 10px

Để thấy được scroll-padding-block Hiệu ứng của thuộc tính phải được thiết lập trên phần tử con scroll-snap-align scroll-snap-align scroll-padding-block Rất giống Thuộc tính, và thiết lập trên phần tử cha scroll-snap-type

Thuộc tính của CSS scroll-padding-block Rất giống scroll-padding-inline Thuộc tính tương ứng với thuộc tính CSS Thuộc tính scroll-padding-top trong CSS,scroll-padding-bottom,scroll-padding-left Rất giống scroll-padding-right nhưng scroll-padding-block Rất giống scroll-padding-inline Thuộc tính này phụ thuộc vào hướng khối và hướng nội.

Thực tế

Ví dụ 1

Trong hướng khối, thiết lập滚动 nội lề từ container đến vị trí dính là 20px:

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

Thử ngay

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

scroll-padding-block Thuộc tính này có thể được sử dụng cho hình ảnh gương mà có hành vi dính để đẩy hình ảnh xuống dưới phần tử cố định:

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

Thử ngay

Ví dụ 3

Khi phần tử 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 phần tử và con phần tử trong hướng khối di chuyển từ trên xuống phải, vị trí kết thúc di chuyển từ dưới lên trái. Điều này sẽ ảnh hưởng đến hành vi cuộn dính và scroll-padding-block Cách hoạt động của thuộc tính:

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

Thử ngay

Ngữ pháp CSS

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

Giá trị thuộc tính

Chi tiết kỹ thuật

Hỗ trợ trình duyệt

Số liệu 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.

Trang liên quan

Tham khảo:Thuộc tính scroll-padding-block-end trong CSS

Tham khảo:Thuộc tính scroll-padding-block-start trong CSS

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 CSS