Thuộc tính khối đệm cuộn CSS
Ví dụ
Đặt phần đệm cuộn thành 20px từ vùng chứa đến vị trí chụp, theo hướng khối:
div {
scroll-padding-block: 20px;
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc scroll-padding-block
chỉ định khoảng cách theo hướng khối, từ vùng chứa đến vị trí đính trên các phần tử con.
Điều này có nghĩa là khi bạn dừng cuộn, quá trình cuộn sẽ nhanh chóng điều chỉnh và dừng ở một khoảng cách xác định theo hướng khối, giữa vị trí chụp và vùng chứa.
Hướng khối là nơi đặt dòng tiếp theo so với vị trí của dòng hiện có và đây cũng là cách các thẻ có CSS display: block;
như thẻ <p> và <div> được trình bày trên một trang. Hướng khối phụ thuộc vào ngôn ngữ viết, tức là tiếng Mông Cổ nơi các dòng mới được đặt từ trái sang phải khiến hướng khối từ trái sang phải, trong khi các trang bằng tiếng Anh có hướng khối đi xuống. Hướng khối có thể được xác định bằng thuộc tính CSS writing-mode
.
Vị trí đính là vị trí trên phần tử con nơi nó khớp vào vị trí trong vùng chứa khi bạn dừng cuộn.
Lưu ý: Thuộc tính này chỉ hoạt động nếu thuộc tính cuộn-snap-align được đặt thành 'bắt đầu' hoặc 'kết thúc' cho hướng khối.
Thuộc tính scroll-padding-block
là thuộc tính tốc ký cho các thuộc tính sau:
Các giá trị cho thuộc tính scroll-padding-block
có thể được đặt theo nhiều cách khác nhau:
Nếu thuộc tính khối đệm cuộn có hai giá trị:
- khối đệm cuộn: 10px 50px;
- khoảng cách lúc bắt đầu là 10px
- khoảng cách ở cuối là 50px
Nếu thuộc tính khối đệm cuộn có một giá trị:
- khối đệm cuộn: 10px;
- khoảng cách lúc bắt đầu và kết thúc là 10px
Để xem hiệu ứng từ thuộc tính scroll-padding-block
, thuộc tính scroll-snap-align
phải được đặt trên các phần tử con và thuộc scroll-padding-block
và scroll-snap-type
phải được đặt trên phần tử cha .
Các thuộc tính CSS scroll-padding-block
và scroll-padding-inline
rất giống với các thuộc tính CSS scroll-padding-top
, scroll-padding-bottom
, scroll-padding-left
và scroll-padding-right
, nhưng scroll-padding-block
các thuộc tính scroll-padding-block
và scroll-padding-inline
phụ thuộc vào hướng khối và nội tuyến.
Giá trị mặc định: | tự động |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | KHÔNG. Đọc về hoạt hình |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.scrollPaddingBlock="20px"Hãy dùng thử |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
scroll-padding-block | 69.0 | 79.0 | 68.0 | 15.0 | 56.0 |
Cú pháp CSS
scroll-padding-block: auto| value |initial|inherit;
Giá trị tài sản
Value | Description |
---|---|
auto | Default value. The browser calculates the padding |
length | Specifies scroll-padding-block in px, pt, cm, etc. Negative values are not allowed. Read about length units |
% | Specifies the padding in percent of the width of the containing element |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Thư viện hình ảnh
Thuộc tính scroll-padding-block
có thể được sử dụng trong thư viện hình ảnh với hành vi chụp nhanh, để đẩy hình ảnh xuống dưới một phần tử cố định:
#container {
scroll-padding-block: 30px 0;
}
Ví dụ
Với giá trị thuộc writing-mode
của phần tử vùng chứa được đặt thành rl dọc, phần bắt đầu của phần tử vùng chứa và phần tử con theo hướng khối được di chuyển từ trên sang bên phải và phần cuối của phần tử vùng chứa và phần tử con được di chuyển từ dưới lên trên. bên trái. Điều này ảnh hưởng đến hành vi cuộn cuộn và cách hoạt động của thuộc tính khối đệm cuộn:
#container {
scroll-padding-block: 20px 0;
writing-mode: vertical-rl;
}
Hãy tự mình thử »Trang liên quan
Thuộc tính CSS cuộn-padding-block-end: Thuộc tính CSS cuộn-padding-block-end
Thuộc tính CSS cuộn-padding-block-start: Thuộc tính CSS cuộn-padding-block-start
Thuộc tính CSS cuộn-snap-align: Thuộc tính CSS Scroll-snap-align
Thuộc tính CSS cuộn-snap-type: Thuộc tính CSS Scroll-snap-type
Thuộc tính chế độ viết CSS: Thuộc tính chế độ viết CSS