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

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

scroll-margin-inline Thuộc tính xác định khoảng cách từ vị trí dính và container theo hướng nội bộ.

Đ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 nội bộ, khoảng cách này nằm giữa vị trí dính và container.

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

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

scroll-margin-inline Thuộc tính là tắt viết tắt của các thuộc tính sau:

scroll-margin-inline Giá trị của thuộc tính có thể được thiết lập bằng nhiều cách khác nhau:

Nếu thuộc tính scroll-margin-inline có hai giá trị:

scroll-margin-inline: 20px 70px;
  • Khoảng cách từ đầu là 20px
  • Khoảng cách từ cuối là 70px

Nếu thuộc tính scroll-margin-inline có một giá trị:

scroll-margin-inline: 20px;
  • Khoảng cách từ đầu và cuối đều là 20px

Để thấy được scroll-margin-inline Hiệu ứng của thuộc tính phải được thiết lập trên phần tử con scroll-margin-inline và scroll-snap-align và thiết lập trên elemen 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 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 phụ thuộc vào hướng khối và hướng trong.

Mô hình

Ví dụ 1

Đặt ở hướng trong, khoảng cách từ vị trí dính đến container cuộn:

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

Thử ngay

Ví dụ 2

Khi elemen <div> của writing-mode Khi thuộc tính giá trị được thiết lập thành vertical-rl, hướng trong là từ dưới lên. Kết quả là vị trí bắt đầu của elemen di chuyển từ bên trái lên trên, vị trí kết thúc của elemen di chuyển từ bên phải xuống dưới. Điều này cũng ảnh hưởng đến scroll-margin-inline Thuộc tính:

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

Thử ngay

Ví dụ 3

Khi elemen <div> của direction Khi thuộc tính giá trị được thiết lập thành rtl, hướng trong là từ phải qua trái. Kết quả là vị trí bắt đầu của elemen di chuyển từ bên trái sang bên phải, vị trí kết thúc của elemen di chuyển từ bên phải sang bên trái. Điều này cũng ảnh hưởng đến scroll-margin-inline Thuộc tính:

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

Thử ngay

Ngôn ngữ CSS

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

Giá trị thuộc tính

Giá trị Mô tả
0 Mặc định. Khoảng cách scroll-margin-inline mặc định của elemen.
length

Định nghĩa khoảng cách bằng 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 thành giá trị mặc định. Xem thêm initial.
inherit Thực hiện thuộc tính này từ elemen cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định: 0
Di truyền: Không
Hoạt hình: Không hỗ trợ. Xem thêm:Thuộc tính liên quan đến hoạt hình.
Phiên bản: CSS3
Ngôn ngữ lập trình JavaScript: object.style.scrollMarginInline="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-margin-inline-end trong CSS

Tham khảo:Thuộc tính scroll-margin-inline-start 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