Thuộc tính scroll-margin của CSS
- trang trước scroll-behavior
- trang sau scroll-margin-block
Định nghĩa và cách sử dụng
scroll-margin Thuộc tính này xác định khoảng cách giữa vị trí dính và khung.
Đ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í dính và khung.
Vị trí dính là vị trí mà phần tử con dính vào khi phần tử dừng cuộn trong khung.
scroll-margin Thuộc tính là tóm tắt của các thuộc tính sau:
scroll-margin 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-margin có bốn giá trị:
scroll-margin: 15px 30px 60px 90px;
- Khoảng cách trên cùng là 15px
- Khoảng cách bên phải là 30px
- Khoảng cách dưới cùng là 60px
- Khoảng cách bên trái là 90px
Nếu thuộc tính scroll-margin có ba giá trị:
scroll-margin: 15px 30px 60px;
- Khoảng cách trên cùng là 15px
- Khoảng cách hai bên là 30px
- Khoảng cách dưới cùng là 60px
Nếu thuộc tính scroll-margin có hai giá trị:
scroll-margin: 15px 30px;
- Khoảng cách trên và dưới là 15px
- Khoảng cách hai bên là 30px
Nếu thuộc tính scroll-margin có một giá trị:
scroll-margin: 10px;
- Khoảng cách ở bốn hướng đều là 10px
Để xem scroll-margin Thuộc tính có hiệu ứng, phải thiết lập scroll-margin và scroll-snap-align Thuộc tính, và thiết lập trên phần tử cha scroll-snap-type Thuộc tính.
Lưu ý:Trong ví dụ sau, khoảng cách cuộn được thiết lập cho tất cả các cạnh, nhưng do scroll-snap-align Thuộc tính được đặt thành "start", vì vậy chỉ khoảng cách cuộn ở trên thay đổi hành vi cuộn.
Mẫu
Ví dụ 1
Thiết lập khoảng cách滚动 ngoại viền từ vị trí dính đến容器的 là 20px:
div {
scroll-margin: 20px;
}
Ví dụ 2: Thư viện hình ảnh
scroll-margin Thuộc tính này có thể được sử dụng trong thư viện hình ảnh có hành vi dính.scroll-margin Cho phép người dùng thấy rằng bên trái còn một ảnh khác. Cuộn qua ảnh đầu tiên để xem hiệu ứng:
#container > img {
scroll-margin: 0 0 0 30px;
}
Ví dụ 3: Thiết lập khoảng cách滚动 ngoại viền ở đáy và bên phải
Có thể thiết lập ở đáy và bên phải của phần tử. scroll-margin Thuộc tính. Cuộn ngang và dọc đến phần tử tiếp theo để xem hiệu ứng:
#container > div {
scroll-margin: 0 10px 30px 0;
}
Cú pháp CSS
scroll-margin: 0|value|initial|inherit;
Giá trị thuộc tính
| Giá trị | Mô tả |
|---|---|
| 0 | Khoảng cách滚动 ngoại viền là 0. Giá trị mặc định. |
| length |
Định nghĩa khoảng cách滚动 ngoại viền với đơn vị là px, pt, cm, v.v. Cho phép sử dụng giá trị âm. Xem thêm:Đơn vị CSS. |
| initial | Đặt thuộc tính này về giá trị mặc định. Xem thêm initial. |
| inherit | Thuộc tính này được kế thừa từ phần tử cha. Xem thêm inherit. |
Chi tiết kỹ thuật
| Giá trị mặc định: | 0 |
|---|---|
| Di truyền: | Không |
| Tạo animation: | Không hỗ trợ. Xem thêm:Các thuộc tính liên quan đến animation. |
| Phiên bản: | CSS3 |
| Cú pháp JavaScript: | object.style.scrollMargin="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ợ tính thuộc tính này.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 69.0 | 79.0 | 90.0 | 14.1 | 56.0 |
Trang liên quan
Tham khảo:Thuộc tính scroll-margin-bottom của CSS
Tham khảo:Thuộc tính scroll-margin-left của CSS
Tham khảo:Thuộc tính scroll-margin-right của CSS
Tham khảo:Thuộc tính scroll-margin-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-behavior
- trang sau scroll-margin-block
