スクロール可能性のアフォーダンス ヒント

ウェブ機能: コンテナのスクロール状態クエリ

概要

シャドウやグラデーションなどの視覚的なヒントは、スクロールするとさらにコンテンツが表示されることをユーザーが理解するのに役立ちます。このガイドでは、CSS container-scroll-state-queries を使用してこれらのヒントを作成する方法について説明します。これにより、JavaScript のスクロール リスナーやオブザーバーに依存することなく、コンテナのスクロール可能な状態に基づいて要素のスタイルを設定できます。

実装

1. スクロール コンテナを確立する

スクロール コンテナは、スクロール状態クエリ コンテナとして宣言する必要があります。

.scroller {
  overflow-y: auto;
  /* Establish this element as a scroll-state query container */
  container-type: scroll-state;
  position: relative;
}

2. インジケーターのスタイルを設定する

インジケーター要素（影、グラデーション、矢印など）をコンテナ内に配置し、スタイルを設定します。デフォルトでは、これらは表示されません。表示される場合は、pointer-events: none を設定して、インタラクティブにならないようにする必要があります。

.indicator-top, .indicator-bottom {
  position: sticky;
  left: 0;
  right: 0;
  height: 20px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none; /* Let clicks pass through */
}

.indicator-top {
  top: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2), transparent); /* Example: Shadow */
}

.indicator-bottom {
  bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.2), transparent); /* Example: Shadow */
}

3. スクロール状態をクエリする

scroll-state 関数で @container ルールを使用します。コンテナが上下にスクロール可能かどうかを確認して、それぞれのインジケーターを表示します。

/* Show top indicator when the user can scroll up */
@container scroll-state(scrollable: top) {
  .indicator-top {
    opacity: 1;
  }
}

/* Show bottom indicator when the user can scroll down */
@container scroll-state(scrollable: bottom) {
  .indicator-bottom {
    opacity: 1;
  }
}

代替戦略

基本的なフォールバック

この機能がサポートされていない場合、インジケーターは表示されません。これらはヒントであり、機能に不可欠なものではないため、サポートされていないブラウザでは省略しても問題ありません。

高度な代替手段（Intersection Observer）

ヒントが必要な場合は、IntersectionObserver を使用して、スクローラーの上部と下部にあるセンチネル要素がスクロールポートに出入りするときにクラスを切り替えます。

<!-- Sentinel elements placed at the ends of the scroller -->
<div class="sentinel-top"></div>
<!-- Content goes here -->
<div class="sentinel-bottom"></div>

/* Marker styling to ensure it does not affect layout */
.sentinel-top, .sentinel-bottom {
  height: 0;
  width: 0;
  visibility: hidden;
}

.scroller.scrolled-down .indicator-top {
  opacity: 1;
}

.scroller.can-scroll-down .indicator-bottom {
  opacity: 1;
}

if (!CSS.supports('container-type', 'scroll-state')) {
  const topSentinel = document.querySelector('.sentinel-top');
  const bottomSentinel = document.querySelector('.sentinel-bottom');
  const scroller = document.querySelector('.scroller');

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.target === topSentinel) {
        // If top sentinel is not intersecting, we have scrolled down
        scroller.classList.toggle('scrolled-down', !entry.isIntersecting);
      }
      if (entry.target === bottomSentinel) {
        // If bottom sentinel is intersecting, we reached the bottom
        scroller.classList.toggle('can-scroll-down', !entry.isIntersecting);
      }
    });
  }, { root: scroller });

  observer.observe(topSentinel);
  observer.observe(bottomSentinel);
}