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

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

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

Vị trí dính là vị trí cố định của phần tử con trong khung chứa khi cuộn dừng lại. Vị trí dính được chỉ định bởi scroll-snap-align của thuộc tính, nhưng cũng có thể bị ảnh hưởng bởi thuộc tính CSS direction và Thuộc tính writing-mode của nó.

Lưu ý:Thuộc tính này chỉ hoạt động khi vị trí dính được đặt ở bên phải của phần tử con.

để thấy scroll-margin-right Thuộc tính trên phần tử cha, thì phải đặt scroll-margin-right và scroll-snap-align Thuộc tính, và đặt scroll-snap-type Thuộc tính.

Mô hình

Ví dụ 1

Đặt mép ngoài cuộn giữa vị trí dính và khung chứa là 20px:

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

Thử nghiệm trực tiếp

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

scroll-margin-right 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-right Hãy cho người dùng biết rằng bên phả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-right: 30px;
}

Thử nghiệm trực tiếp

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

Để làm cho scroll-margin-right Thuộc tính sẽ hoạt động, vị trí dính phải được đặt ở bên phả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 phải của phần tử con sang bên trái. Sử dụng mã như sau,scroll-margin-right Thuộc tính sẽ không còn hoạt động:

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

Thử nghiệm trực tiếp

Ngôn ngữ CSS

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

Giá trị thuộc tính

Chi tiết kỹ thuật

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.

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