Thuộc tính cuộn-lề-dưới CSS
Ví dụ
Đặt lề cuộn dưới cùng thành 20px giữa vị trí chụp và vùng chứa:
div {
scroll-margin-bottom: 20px;
}
Hãy tự mình thử »Thêm các 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-bottom
chỉ định khoảng cách 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. Vị trí chụp được đặt bằng thuộc tính scroll-snap-align
, nhưng cũng có thể bị ảnh hưởng bởi direction
thuộc tính CSS và writing-mode
.
Lưu ý: Thuộc tính này chỉ hoạt động nếu vị trí snap được đặt ở cuối phần tử con.
Để xem hiệu ứng từ thuộc tính scroll-margin-bottom
, thuộc tính scroll-margin-bottom
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: | không có |
---|---|
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.scrollMarginBottom="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-bottom | 69.0 | 79.0 | 68.0 | 14.1 | 56.0 |
Cú pháp CSS
scroll-margin-bottom: 0| value |initial|inherit;
Giá trị tài sản
Value | Description |
---|---|
0 | Scroll-margin-bottom is zero. This is default |
length | Specifies scroll-margin-bottom 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 tính scroll-margin-bottom
có thể được sử dụng trong thư viện hình ảnh với hành vi chụp nhanh. Ở đây, phần dưới cùng của lề cuộn cho phép người dùng thấy rằng có một hình ảnh ở phía dưới. Cuộn qua hình ảnh đầu tiên để xem hiệu ứng:
#container > img {
scroll-margin-bottom: 30px;
}
Hãy tự mình thử »Chụp vị trí
Vị trí chụp phải được đặt ở dưới cùng của các phần tử con để thuộc tính scroll-margin-bottom
hoạt động. Trong ví dụ này, thuộc tính writing-mode
thay đổi vị trí đính từ dưới lên bên trái của các phần tử con. Với mã như thế này, thuộc tính scroll-margin-bottom
không còn hoạt động:
#container {
writing-mode: vertical-rl;
}
#container > div {
scroll-margin-bottom: 30px;
scroll-snap-align: end none;
}
Hãy tự mình thử »Trang liên quan
Thuộc tính hướng CSS: Thuộc tính CSS Direction
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