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

Định nghĩa và cách sử dụng

scroll-margin-inline-end Thuộc tính xác định khoảng cách từ vị trí thu hút với khối chứa theo hướng trong dòng.

Điều này có nghĩa là, khi bạn dừng cuộn, cuộn sẽ điều chỉnh nhanh chóng và dừng lại ở khoảng cách được chỉ định theo hướng trong dòng, khoảng cách này là khoảng cách từ vị trí thu hút cuối của phần tử con với khối chứa.

Hướng trong dòng là hướng đặt ký tự tiếp theo so với ký tự hiện tại trong dòng, điều này cũng là cách布局 của thẻ có CSS display: inline; (như thẻ <a> và <strong>) trong văn bản. Hướng trong dòng phụ thuộc vào ngôn ngữ viết, ví dụ như ký tự mới của tiếng Ả Rập được sắp xếp từ phải sang trái, vì vậy hướng trong dòng là từ phải sang trái, trong khi hướng trong dòng của trang tiếng Anh là từ trái sang phải. Hướng trong dòng có thể được xác định qua thuộc tính CSS direction và writing-mode Định nghĩa.

Vị trí thu hút là khi bạn dừng cuộn, phần tử con sẽ thu hút vào vị trí trong khối chứa.

Lưu ý:Thuộc tính này chỉ được thiết lập trên hướng nội scroll-snap-align Thuộc tính hoạt động khi giá trị là 'end'.

để nhìn thấy scroll-margin-inline-end phải được thiết lập trên phần tử con scroll-margin-inline-end và scroll-snap-align phải được thiết lập trên phần tử cha Thuộc tính scroll-snap-type .

Thuộc tính của CSS scroll-margin-inline và scroll-margin-block Thuộc tính tương ứng với thuộc tính CSS Thuộc tính scroll-margin-top của CSS、scroll-margin-bottom、scroll-margin-left và scroll-margin-right rất giống nhau, nhưng scroll-margin-block và scroll-margin-inline Thuộc tính này phụ thuộc vào hướng khối và hướng nội.

Mẫu

Ví dụ 1

Đặt khoảng cách từ vị trí dính đến khối chứa cuộn:

div {
  scroll-margin-inline-end: 20px;
}

Thử ngay

Ví dụ 2

Khi thuộc tính của phần tử <div> là writing-mode Khi giá trị thuộc tính là vertical-rl, hướng nội là xuống. Kết quả là phần cuối của phần tử di chuyển từ bên phải xuống dưới:

div {
  scroll-margin-inline-end: 20px;
  writing-mode: vertical-rl;
}

Thử ngay

Ví dụ 3

Khi thuộc tính của phần tử <div> là direction Khi giá trị thuộc tính là rtl, hướng nội là từ phải sang trái. Kết quả là phần cuối của phần tử di chuyển từ bên phải sang bên trái:

div {
  scroll-margin-inline-end: 20px;
  direction: rtl;
}

Thử ngay

Cú pháp CSS

scroll-margin-inline-end: 0|value|initial|inherit;

Giá trị thuộc tính

Chi tiết kỹ thuật

Hỗ trợ trình duyệt

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 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