Thuộc tính scroll-margin-left trong CSS

定 nghĩa và cách sử dụng

scroll-margin-left Thuộc tính chỉ định khoảng cách giữa vị trí dính và container.

Vị trí dính là vị trí cố định của phần tử con trong container khi cuộn dừng lại. Vị trí dính được chỉ định bởi thuộc tính Thuộc tính hiệu ứng, phải được đặt trên phần tử con cài đặt, nhưng cũng có thể bị ảnh hưởng bởi thuộc tính CSS direction Để thấy writing-mode cài đặt, nhưng cũng có thể bị ảnh hưởng bởi thuộc tính CSS

Thuộc tínhảnh hưởng.

Lưu ý: scroll-margin-left Thuộc tính này chỉ hoạt động khi vị trí dính được đặt ở bên trái của phần tử con. scroll-margin-left Để thấy Thuộc tính hiệu ứng, phải được đặt trên phần tử con và Thuộc tính Thuộc tính.

Mô hình

Ví dụ 1

Đặt vị trí dính và margin cuộn giữa container là 20px:

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

Thử ngay

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

scroll-margin-left Thuộc tính có thể được sử dụng trong thư viện hình ảnh có hành vi dính. Ở đây,scroll-margin-left Hãy để người dùng biết rằng bên trái còn một hình ảnh khác. Cuộn qua hình ảnh đầu tiên để xem hiệu ứng:

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

Thử ngay

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

Để làm cho scroll-margin-left Thuộc tính hoạt động, vị trí dính phải được đặt ở bên trái của phần tử con. Trong ví dụ này,direction Thuộc tính sẽ thay đổi vị trí dính từ bên trái của phần tử con sang bên phải. Sử dụng mã như sau:scroll-margin-left Thuộc tính sẽ không còn hoạt động:

#container {
  direction: rtl;
}
#container > div {
  scroll-margin-left: 30px;
  scroll-snap-align: none start;
}

Thử ngay

Ngôn ngữ CSS

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

Giá trị thuộc tính

Chi tiết kỹ thuật

Hỗ trợ trình duyệt

Số 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.

Trang liên quan

Tham khảo：Thuộc tính direction trong CSS

Tham khảo：Thuộc tính scroll-snap-align trong CSS

Tham khảo：Thuộc tính scroll-snap-type trong CSS

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