1. Web
  2. CSS
  3. Reference
  4. Properties
  5. scroll-margin-inline

scroll-margin-inline

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

Thuộc tính viết tắt scroll-margin-inline thiết lập lề cuộn của một phần tử theo chiều inline.

Try it

scroll-margin-inline: 0;

scroll-margin-inline: 40px 20px;

scroll-margin-inline: 4em 0;

scroll-margin-inline: 0px 3em;

<section class="default-example" id="default-example">
  <div class="scroller">
    <div>1</div>
    <div id="example-element">2</div>
    <div>3</div>
  </div>
  <div class="info">Scroll »</div>
</section>

.default-example {
  flex-wrap: wrap;
}

.default-example .info {
  width: 100%;
  padding: 0.5em 0;
  font-size: 90%;
}

.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: x mandatory;
}

.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: end;
}

.scroller > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

Các thuộc tính thành phần

Thuộc tính này là viết tắt cho các thuộc tính CSS sau:

Cú pháp

css
/* Giá trị <length> */
scroll-margin-inline: 10px;
scroll-margin-inline: 1em 0.5em;

/* Giá trị toàn cục */
scroll-margin-inline: inherit;
scroll-margin-inline: initial;
scroll-margin-inline: revert;
scroll-margin-inline: revert-layer;
scroll-margin-inline: unset;

Giá trị

<length>

Khoảng cách tính từ cạnh tương ứng của vùng chứa cuộn.

Mô tả

Các giá trị scroll-margin đại diện cho khoảng cách xác định vùng cuộn snap được dùng để căn snap hộp này vào snapport. Vùng cuộn snap được xác định bằng cách lấy hộp viền đã biến đổi, tìm hộp bao hình chữ nhật của nó (căn chỉnh theo trục trong không gian tọa độ của vùng chứa cuộn), sau đó thêm các khoảng cách đã chỉ định.

Định nghĩa hình thức

Initial valueas each of the properties of the shorthand:
Applies toall elements
Inheritedno
Computed valueas each of the properties of the shorthand:
Animation typeby computed value type

Cú pháp hình thức

scroll-margin-inline = 
  <length>{1,2}

Ví dụ

Minh họa cơ bản

Ví dụ này triển khai điều gì đó rất giống với ví dụ tương tác ở trên, ngoại trừ ở đây chúng ta sẽ giải thích cách nó được triển khai.

Mục tiêu ở đây là tạo bốn khối cuộn ngang, trong đó khối thứ hai và thứ ba sẽ snap vào vị trí, gần nhưng không hoàn toàn ở phía phải của mỗi khối.

HTML

HTML bao gồm một scroller với bốn phần tử con:

html
<div class="scroller">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

CSS

Hãy cùng xem qua CSS. Container bên ngoài được định kiểu như sau:

css
.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: x mandatory;
}

Các phần quan trọng liên quan đến scroll snapping là overflow-x: scroll, đảm bảo nội dung sẽ cuộn chứ không bị ẩn, và scroll-snap-type: x mandatory, quy định rằng scroll snapping phải xảy ra dọc theo trục ngang, và thanh cuộn luôn dừng lại tại một điểm snap.

Các phần tử con được định kiểu như sau:

css
.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: end;
}

.scroller > div:nth-child(2n) {
  background-color: white;
  color: rebeccapurple;
}

Phần quan trọng nhất ở đây là scroll-snap-align: end, xác định rằng các cạnh bên phải (các "điểm cuối" dọc theo trục x trong trường hợp này) là các điểm snap được chỉ định.

Cuối cùng, chúng ta chỉ định giá trị scroll-margin, mỗi giá trị khác nhau cho phần tử con thứ hai và thứ ba:

css
.scroller > div:nth-child(2) {
  scroll-margin-inline: 1rem;
}

.scroller > div:nth-child(3) {
  scroll-margin-inline: 2rem;
}

Điều này có nghĩa là khi cuộn qua các phần tử con ở giữa, thanh cuộn sẽ snap đến 1rem bên ngoài cạnh cuối inline của <div> thứ hai, và 2rem bên ngoài cạnh cuối inline của <div> thứ ba.

Note: Ở đây chúng ta đang đặt scroll-margin trên cả điểm đầu và điểm cuối của trục inline (x trong trường hợp này), nhưng chỉ cạnh cuối mới thực sự có liên quan. Sử dụng scroll-margin-inline: 0 1rem hoặc scroll-margin-inline-end: 1rem sẽ hoạt động tương tự.

Kết quả

Hãy tự thử:

Đặc tả

Specification
CSS Scroll Snap Module Level 1
# propdef-scroll-margin-inline

Khả năng tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content