Thuộc tính scroll-margin-inline-start trong CSS

Xác định và sử dụng

scroll-margin-inline-start Thuộc tính xác định khoảng cách giữa vị trí hấp dẫn và容器 trong hướng dẫn trong dòng.

Điều này có nghĩa là, khi bạn dừng cuộn, cuộn sẽ nhanh chóng điều chỉnh và dừng lại ở khoảng cách đã chỉ định giữa vị trí hấp dẫn của phần tử con và容器 trong hướng dẫn trong dòng.

Hướng dẫn trong dòng là hướng đặt của 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 sắp đặt của thẻ có CSS display: inline; (như thẻ <a> và <strong>) trong văn bản. Hướng dẫn trong dòng phụ thuộc vào ngôn ngữ viết, ví dụ như các ký tự阿拉伯语 được sắp đặt từ phải sang trái, vì vậy hướng dẫn trong dòng là từ phải sang trái, trong khi hướng dẫn trong dòng của trang tiếng Anh là từ trái sang phải. Hướng dẫn trong dòng có thể được điều chỉnh thông qua thuộc tính CSS direction và writing-mode Định nghĩa.

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

Lưu ý:Thuộc tính này chỉ hoạt động trong scroll-snap-align chỉ hoạt động khi thuộc tính hướng nội bộ được thiết lập thành 'start'.

Thuộc tính của CSS scroll-margin-inline và scroll-margin-block thuộc tính với thuộc tính CSS Thuộc tính scroll-margin-top trong CSS,scroll-margin-bottom,scroll-margin-left và scroll-margin-right rất相似, 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 bộ.

Mô hình

Ví dụ 1

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

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

Thử ngay

Ví dụ 2

Khi phần tử <div> có writing-mode Khi giá trị thuộc tính được thiết lập thành vertical-rl, hướng nội bộ là từ dưới lên. Kết quả là vị trí bắt đầu của phần tử di chuyển từ bên trái lên trên cùng:

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

Thử ngay

Ví dụ 3

Khi phần tử <div> có direction Khi giá trị thuộc tính được thiết lập thành rtl, hướng nội bộ là từ phải sang trái. Kết quả là vị trí bắt đầu của phần tử điều chỉnh từ bên trái (so với hướng mặc định, thực tế vẫn bắt đầu từ bên phải, nhưng ở đây 'bên trái' là bên trái của hướng mặc định là ltr) điều chỉnh:

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

Thử ngay

Cú pháp CSS

inset-inline-start: 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