Thuộc tính scroll-padding của CSS
- trang trước scroll-margin-top
- trang tiếp theo scroll-padding-block
Định nghĩa và cách sử dụng
scroll-padding Thuộc tính này xác định khoảng cách từ container đến vị trí dính của phần tử con.
Đ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 từ container đến vị trí dính của phần tử con.
Vị trí dính là vị trí cố định của phần tử con trong容器 khi phần tử con dừng cuộn.
scroll-padding Thuộc tính này là viết tắt của các thuộc tính sau:
scroll-padding Giá trị của thuộc tính có thể được thiết lập theo nhiều cách khác nhau:
Nếu thuộc tính scroll-padding có bốn giá trị:
scroll-padding: 15px 30px 60px 90px;
- Khoảng cách từ trên xuống là 15px
- Khoảng cách từ bên phải là 30px
- Khoảng cách từ dưới lên là 60px
- Khoảng cách từ bên trái là 90px
Nếu thuộc tính scroll-padding có ba giá trị:
scroll-padding: 15px 30px 60px;
- Khoảng cách từ trên xuống là 15px
- Khoảng cách bên trái và bên phải là 30px
- Khoảng cách từ dưới lên là 60px
Nếu thuộc tính scroll-padding có hai giá trị:
scroll-padding: 15px 30px;
- Khoảng cách từ trên xuống dưới là 15px
- Khoảng cách bên trái và bên phải là 30px
Nếu thuộc tính scroll-padding có một giá trị:
scroll-padding: 10px;
- Khoảng cách ở bốn hướng đều là 10px
để thấy scroll-padding Thuộc tính trên phần tử cha, thì phải thiết lập scroll-snap-align Thuộc tính, và thiết lập thuộc tính scroll-padding và scroll-snap-type Thuộc tính.
Lưu ý:Trong ví dụ sau, đã thiết lập khoảng cách nội边 cuộn cho tất cả các cạnh, nhưng do scroll-snap-align Đặt thành "start", vì vậy chỉ có khoảng cách nội边 cuộn ở cạnh trên thay đổi hành vi cuộn.
Mô hình
Ví dụ 1
Thiết lập khoảng cách nội边距 cuộn từ khung đến vị trí dính là 20px:
div {
scroll-padding: 20px;
}
Ví dụ 2: Thư viện hình ảnh
scroll-padding Thuộc tính có thể được sử dụng trong hình ảnh thư viện có hành vi dính để đẩy hình ảnh xuống dưới phần tử cố định:
#container {
scroll-padding: 30px 0 0 0;
}
Ví dụ 3: Thiết lập khoảng cách nội边距 ở đáy và bên phải
scroll-padding Thuộc tính có thể được thiết lập cùng lúc ở đáy và bên phải của khung. Cuộn ngang và dọc đến phần tử tiếp theo để xem hiệu ứng:
#container {
scroll-padding: 0 10px 30px 0;
}
Cú pháp CSS
scroll-padding: 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 nội边距. |
| length |
Đặt khoảng cách nội边距 bằng px, pt, cm, v.v. Không được phép sử dụng giá trị âm. Xem thêm:Đơn vị CSS. |
| % | Đặt khoảng cách trong nội边距 so với 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 hiện 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 |
| Tạo động | Không hỗ trợ. Xem thêm:Thuộc tính liên quan đến động. |
| Phiên bản: | CSS3 |
| Cú pháp JavaScript: | object.style.scrollPadding="20px" |
Hỗ trợ trình duyệt
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 | 14.1 | 56.0 |
Trang liên quan
Tham khảo:Thuộc tính scroll-padding-bottom của CSS
Tham khảo:Thuộc tính scroll-padding-left của CSS
Tham khảo:Thuộc tính scroll-padding-right của CSS
Tham khảo:Thuộc tính scroll-padding-top của CSS
Tham khảo:Thuộc tính scroll-snap-align của CSS
Tham khảo:Thuộc tính scroll-snap-type của CSS
- trang trước scroll-margin-top
- trang tiếp theo scroll-padding-block
