CSS Scroll Marker 怎麼做？用 ::scroll-marker 建立可存取輪播導覽

1
<ul class="carousel" aria-label="產品特色">
2
  <li>
3
    <h2>快速搜尋</h2>
4
    <p>用關鍵字找到需要的功能。</p>
5
  </li>
6
  <li>
7
    <h2>離線可讀</h2>
8
    <p>沒有網路時仍保留已載入內容。</p>
9
  </li>
10
  <li>
11
    <h2>鍵盤友善</h2>
12
    <p>不使用滑鼠也能完成導覽。</p>
13
  </li>
14
</ul>

1
.carousel {
2
  display: flex;
3
  gap: 1rem;
4
  margin: 0;
5
  padding: 0 1rem 1rem;
6
  overflow-x: auto;
7
  overscroll-behavior-inline: contain;
8
  scroll-snap-type: inline mandatory;
9
  scroll-behavior: smooth;
10
}
11

12
.carousel > li {
13
  flex: 0 0 min(80vw, 24rem);
14
  min-block-size: 12rem;
15
  padding: 1.25rem;
16
  list-style: none;
17
  scroll-snap-align: start;
18
  border: 1px solid #cbd5e1;
19
  border-radius: 0.75rem;
20
}
21

22
@media (prefers-reduced-motion: reduce) {
23
  .carousel {
24
    scroll-behavior: auto;
25
  }
26
}

1
.carousel {
2
  scroll-marker-group: after;
3
  counter-reset: carousel-card;
4
}
5

6
.carousel > li {
7
  counter-increment: carousel-card;
8
}
9

10
.carousel::scroll-marker-group {
11
  display: flex;
12
  justify-content: center;
13
  gap: 0.5rem;
14
  padding-block: 0.75rem;
15
}
16

17
.carousel > li::scroll-marker {
18
  content: counter(carousel-card);
19
  inline-size: 0.75rem;
20
  block-size: 0.75rem;
21
  border: 1px solid currentColor;
22
  border-radius: 50%;
23
  color: #475569;
24
}
25

26
.carousel > li::scroll-marker:focus-visible {
27
  outline: 2px solid currentColor;
28
  outline-offset: 3px;
29
}
30

31
.carousel > li::scroll-marker:target-current {
32
  background: currentColor;
33
}

1
/* 一般輪播、章節導覽：marker 是 links */
2
.carousel {
3
  scroll-marker-group: after links;
4
}
5

6
/* 每次只把一個 panel 當成目前頁面：marker 是 tabs */
7
.feature-tabs {
8
  scroll-marker-group: after tabs;
9
}

1
.carousel::scroll-button(left) {
2
  content: "←" / "往前捲動";
3
}
4

5
.carousel::scroll-button(right) {
6
  content: "→" / "往後捲動";
7
}
8

9
.carousel::scroll-button(*) {
10
  inline-size: 2.25rem;
11
  block-size: 2.25rem;
12
  border: 1px solid #cbd5e1;
13
  border-radius: 50%;
14
  background: Canvas;
15
}
16

17
.carousel::scroll-button(*):disabled {
18
  opacity: 0.4;
19
}
20

21
.carousel::scroll-button(*):focus-visible {
22
  outline: 2px solid currentColor;
23
  outline-offset: 3px;
24
}

1
<nav class="carousel-fallback" aria-label="產品特色導覽">
2
  <a href="#feature-search">快速搜尋</a>
3
  <a href="#feature-offline">離線可讀</a>
4
  <a href="#feature-keyboard">鍵盤友善</a>
5
</nav>

1
<li id="feature-search">...</li>
2
<li id="feature-offline">...</li>
3
<li id="feature-keyboard">...</li>

1
@supports selector(.carousel::scroll-marker) and (scroll-marker-group: after) {
2
  .carousel-fallback {
3
    display: none;
4
  }
5
}

1
@supports selector(.carousel::scroll-marker) and (scroll-marker-group: after) {
2
  .carousel {
3
    scroll-marker-group: after;
4
  }
5

6
  .carousel::scroll-button(left),
7
  .carousel::scroll-button(right) {
8
    content: "";
9
  }
10

11
  .carousel > li::scroll-marker {
12
    content: "";
13
  }
14
}