Thuộc tính lề cuộn CSS
Ví dụ
Đặt lề cuộn thành 20px giữa vị trí chụp và vùng chứa:
div {
scroll-margin: 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 tính scroll-margin
chỉ định khoảng cách giữa vị trí đính và vùng chứa.
Đ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 giữa vị trí chụp và vùng chứa.
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 ý: Trong ví dụ trên, lề cuộn được đặt ở tất cả các cạnh, nhưng chỉ lề cuộn ở phía trên mới thay đổi hành vi cuộn vì thuộc tính scroll-snap-align
được đặt thành "bắt đầu".
Thuộc tính scroll-margin
là thuộc tính viết tắt của các thuộc tính sau:
Các giá trị cho thuộc tính scroll-margin
có thể được đặt theo nhiều cách khác nhau:
Nếu thuộc tính lề cuộn có bốn giá trị:
- lề cuộn: 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 lề cuộn có ba giá trị:
- lề cuộn: 15px 30px 60px;
- khoảng cách trên cùng là 15px
- khoảng cách trái và phải là 30px
- khoảng cách dưới cùng là 60px
Nếu thuộc tính lề cuộn có hai giá trị:
- lề cuộn: 15px 30px;
- khoảng cách trên và dưới là 15px
- khoảng cách trái và phải là 30px
Nếu thuộc tính lề cuộn có một giá trị:
- lề cuộn: 10px;
- cả bốn khoảng cách đều là 10px
Để xem hiệu ứng từ thuộc tính scroll-margin
, thuộc scroll-margin
và scroll-snap-align
phải được đặt trên các phần tử con và thuộc tính scroll-snap-type
phải được đặt trên phần tử cha.
Giá trị mặc định: | 0 |
---|---|
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.scrollMargin="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-margin | 69.0 | 79.0 | 90.0 | 14.1 | 56.0 |
Cú pháp CSS
scroll-margin: 0| value |initial|inherit;
Giá trị tài sản
Value | Description |
---|---|
0 | Scroll-margin is zero. This is default |
length | Specifies scroll-margin in px, pt, cm, etc. Negative values are allowed. Read about length units |
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 scroll-margin
có thể được sử dụng trong thư viện hình ảnh với hành vi chụp nhanh. Ở đây, lề cuộn cho phép người dùng thấy rằng có một hình ảnh ở bên trái. Cuộn qua hình ảnh đầu tiên để xem hiệu ứng:
#container > img {
scroll-margin: 0 0 0 30px;
}
Hãy tự mình thử »Đặt lề cuộn ở dưới cùng và bên phải
Thuộc tính scroll-margin
có thể được đặt ở cả dưới cùng và bên phải của phần tử. Di chuyển đến phần tử tiếp theo theo cả chiều ngang và chiều dọc để xem hiệu ứng:
#container > div {
scroll-margin: 0 10px 30px 0;
}
Trang liên quan
Thuộc tính CSS cuộn-lề-dưới: Thuộc tính CSS cuộn-lề-dưới
Thuộc tính CSS cuộn-lề-trái: Thuộc tính CSS Scroll-margin-left
Thuộc tính CSS cuộn-lề-phải: Thuộc tính CSS cuộn-lề-phải
Thuộc tính CSS cuộn-lề-trên: Thuộc tính CSS cuộn-lề-trên
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