CSS scroll snap と ::scroll-button()

横スクロールSample


概要
- `::scroll-button()` `::scroll-marker` `::scroll-marker-group` `scroll-state()` は CSS の新しい機能 - 2026年05月27日現在、対応しているのはChrome 135以降とEdgeだけ - 現在表示中のアイテムに対応するマーカーが赤く塗りつぶされ、マーカーをクリックすると該当位置までスナップスクロールするサンプル - Container Scroll-State Queries により、左方向にスクロール可能なときだけ◀ボタン、右方向にスクロール可能なときだけ▶ボタンが表示されるサンプル

デモ
1
2
3
4
5
6
7

コード

HTML

 
<div class="container">
  <div class="content">1</div>
  <div class="content">2</div>
  <div class="content">3</div>
  <div class="content">4</div>
  <div class="content">5</div>
  <div class="content">6</div>
  <div class="content">7</div>
</div>

CSS

 
.container {
  overflow-x: scroll;
  width: 480px;
  height: 120px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  box-sizing: border-box;

  /* Scroll Snap Events（横方向） */
  scroll-snap-type: x mandatory;

  /* Container Scroll-State Queries */
  container-type: scroll-state;

  /* Scroll Marker Group */
  scroll-marker-group: after;

  &::scroll-marker-group {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    justify-content: center;
    position: absolute;
  }

  /* スクロールボタン本体（初期は非表示） */
  &::scroll-button(left) {
    content: "◀";
    opacity: 0;
    transition: opacity 0.2s;
  }
  &::scroll-button(right) {
    content: "▶";
    opacity: 0;
    transition: opacity 0.2s;
  }

  /* 左方向にスクロール可能なときだけ左ボタンを表示 */
  @container scroll-state(scrollable: left) {
    &::scroll-button(left) {
      opacity: 1;
    }
  }
  /* 右方向にスクロール可能なときだけ右ボタンを表示 */
  @container scroll-state(scrollable: right) {
    &::scroll-button(right) {
      opacity: 1;
    }
  }

  /* スクロールボタン共通スタイル */
  &::scroll-button(*) {
    background-color: #000;
    color: #fff;
    border-radius: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    margin: 4px;
  }
}

.content {
  width: 240px;
  height: 80px;
  min-width: 240px;
  min-height: 80px;
  border: 2px solid red;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 20px;
  background: #ffebee;

  /* Scroll Snap */
  scroll-snap-align: center;

  /* Scroll Marker（各アイテムに対応する点） */
  &::scroll-marker {
    display: block;
    content: "";
    width: 16px;
    height: 16px;
    border: 1px solid red;
    border-radius: 100%;
    cursor: pointer;
  }

  /* 現在表示中のアイテムに対応するマーカーをハイライト */
  &::scroll-marker:target-current {
    border: 1px solid red;
    background-color: red;
  }
}

参照