Thuộc tính scroll-padding-block-start trong CSS
- Trang trước scroll-padding-block-end
- Trang tiếp theo scroll-padding-bottom
Đị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-start
và scroll-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; }
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; }
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; }
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
- Trang trước scroll-padding-block-end
- Trang tiếp theo scroll-padding-bottom