1. Web
  2. CSS
  3. Reference
  4. Properties
  5. scroll-snap-type

scroll-snap-type

Baseline Widely available

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

Thuộc tính scroll-snap-type CSS được đặt trên scroll container, cho phép nó tham gia vào scroll snapping bằng cách đặt hướng và mức độ nghiêm ngặt của việc thực thi điểm snap trong snap port.

Try it

scroll-snap-type: none;

scroll-snap-type: x mandatory;

scroll-snap-type: x proximity;

<section class="default-example" id="default-example">
  <div id="example-element">
    <div>1</div>
    <div>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%;
}

#example-element {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid black;
}

#example-element > 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: start;
}

#example-element > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

Nếu nội dung trong scroll port thay đổi — ví dụ: nếu nội dung được thêm vào, di chuyển, xóa hoặc thay đổi kích thước — vùng chứa cuộn sẽ snap lại với nội dung đã snap trước đó nếu nội dung đó vẫn còn.

Nếu giá trị của thuộc tính liên quan đến scroll snap, chẳng hạn như scroll-snap-type hoặc scroll-margin, bị thay đổi, vùng chứa cuộn sẽ snap lại dựa trên giá trị hiện tại của scroll-snap-type.

Việc chỉ định các hiệu ứng hoạt hình chính xác hoặc vật lý được sử dụng để thực thi các điểm snap đó không được thuộc tính này bao gồm mà thay vào đó để lại cho tác nhân người dùng.

Cú pháp

css
/* Không snap */
scroll-snap-type: none;

/* Giá trị từ khóa cho trục snap */
scroll-snap-type: x;
scroll-snap-type: y;
scroll-snap-type: block;
scroll-snap-type: inline;
scroll-snap-type: both;

/* Giá trị từ khóa tùy chọn cho mức độ nghiêm ngặt snap */
/* mandatory | proximity */
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;

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

Giá trị

none

Khi viewport hiển thị của vùng chứa cuộn này được cuộn, nó phải bỏ qua các điểm snap.

x

Vùng chứa cuộn chỉ snap đến các vị trí snap trên trục ngang của nó.

y

Vùng chứa cuộn chỉ snap đến các vị trí snap trên trục dọc của nó.

block

Vùng chứa cuộn chỉ snap đến các vị trí snap trên trục block của nó.

inline

Vùng chứa cuộn chỉ snap đến các vị trí snap trên trục inline của nó.

both

Vùng chứa cuộn snap đến các vị trí snap trên cả hai trục độc lập (có thể snap đến các phần tử khác nhau ở mỗi trục).

mandatory

Viewport hiển thị của vùng chứa cuộn này phải snap đến một vị trí snap nếu nó không đang được cuộn.

proximity

Viewport hiển thị của vùng chứa cuộn này có thể snap đến một vị trí snap nếu nó không đang được cuộn. Tác nhân người dùng quyết định có snap hay không dựa trên các tham số cuộn. Đây là mức độ nghiêm ngặt snap mặc định nếu bất kỳ trục snap nào được chỉ định.

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

Initial valuenone
Applies toall elements
Inheritedno
Computed valueas specified
Animation typediscrete

Cú pháp hình thức

scroll-snap-type = 
  none                                                |
  [ x | y | block | inline | both ] [ mandatory | proximity ]?

Ví dụ

Snap trong các trục khác nhau

HTML

html
<main>
  <section class="x mandatory-scroll-snapping" dir="ltr">
    <div>X Mand. LTR</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </section>
  <section class="x proximity-scroll-snapping" dir="ltr">
    <div>X Prox. LTR</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </section>
  <section class="y mandatory-scroll-snapping" dir="ltr">
    <div>Y Mand. LTR</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </section>
  <section class="y proximity-scroll-snapping" dir="ltr">
    <div>Y Prox. LTR</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </section>
  <section class="x mandatory-scroll-snapping" dir="rtl">
    <div>X Mand. RTL</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </section>
  <section class="x proximity-scroll-snapping" dir="rtl">
    <div>X Prox. RTL</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </section>
  <section class="y mandatory-scroll-snapping" dir="rtl">
    <div>Y Mand. RTL</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </section>
  <section class="y proximity-scroll-snapping" dir="rtl">
    <div>Y Prox. RTL</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </section>
</main>

CSS

css
/* scroll-snap */
.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}
.x.proximity-scroll-snapping {
  scroll-snap-type: x proximity;
}
.y.mandatory-scroll-snapping {
  scroll-snap-type: y mandatory;
}
.y.proximity-scroll-snapping {
  scroll-snap-type: y proximity;
}

div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}

Kết quả

Thông số kỹ thuật

Specification
CSS Scroll Snap Module Level 1
# scroll-snap-type

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