Thuộc tính scroll-margin-bottom của CSS

定义和用法

scroll-margin-bottom 属性指定吸附位置与容器之间的距离。

Vị trí dính là vị trí mà phần tử con dính vào khung chứa khi cuộn dừng lại.

Vị trí dính thông qua scroll-snap-align cũng có thể bị ảnh hưởng bởi thuộc tính CSS Thuộc tính và writing-mode tác động.

Lưu ý:Thuộc tính này chỉ có hiệu lực khi vị trí dính được đặt ở dưới của phần tử con.

để thấy scroll-margin-bottom Thuộc tính hiệu ứng, phải đặt scroll-margin-bottom và scroll-snap-align , và đặt Thuộc tính Thuộc tính.

Mô hình

Ví dụ 1

Đặt滚动下外边距 giữa vị trí dính và khung chứa là 20px:

div {
  scroll-margin-bottom: 20px;
}

Thử ngay

Ví dụ 2: Thư viện hình ảnh

scroll-margin-bottom Thuộc tính này có thể được sử dụng cho thư viện hình ảnh có hành vi dính. Trong ví dụ này,scroll-margin-bottom Hãy để người dùng biết rằng còn một hình ảnh ở dưới. Cuộn qua hình ảnh đầu tiên để xem hiệu ứng:

#container > img {
  scroll-margin-bottom: 30px;
}

Thử ngay

Ví dụ 3: Vị trí dính

Để làm cho scroll-margin-bottom Thuộc tính sẽ hoạt động, vị trí dính phải được đặt ở dưới của phần tử con. Trong ví dụ này,writing-mode Thuộc tính sẽ thay đổi vị trí dính từ dưới của phần tử con sang bên trái. Khi sử dụng mã như vậy,scroll-margin-bottom Thuộc tính sẽ không còn hiệu lực:

#container {
  writing-mode: vertical-rl;
}
#container > div {
  scroll-margin-bottom: 30px;
  scroll-snap-align: end none;
}

Thử ngay

Cú pháp CSS

scroll-margin-bottom: 0|value|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
0 滚动下外边距为零。Đây là giá trị mặc định.
length

Định nghĩa滚动下外边距 bằng đơn vị 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: none
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.scrollMarginBottom="20px"

Hỗ trợ trình duyệt

Số liệu 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 direction 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

Tham khảo：Thuộc tính writing-mode CSS