CSS - scroll-target-group

• トップ
• CSSリファレンス
• scroll-target-group

概要

説明

カルーセル において ::scroll-marker-group 疑似要素によりスクロールマーカーグループ(カルーセルの目次の様なもの)のスタイルを指定することはできますが、CSS で表現可能な範囲に限定されていました。scroll-target-group を用いると任意の要素をスクロールマーカーグループとして利用することが可能となり、柔軟なデザインやコンテンツのスクロールマーカーグループを実現することが可能となります。

scroll-target-group に auto を指定した要素がスクロールマーカーグループとなります。スクロールマーカーグループ内の要素で :target-current が付与されたものが、参照中マーカーとなります。

使用例

.my-example {
  position: relative;
  width: 95%;
  height: 400px;
  border: 1px solid #ccc;
  overflow-y: scroll;
  .my-scroll-marker-group {
    position: sticky;
    top: 20px;
    width: 80px;
    margin-left: auto;
    margin-right: 10px;
    z-index: 2;
    padding: 16px 16px 16px 32px;
    background-color: #eee;
    scroll-target-group: auto;
    a:target-current {
      color: red;
    }
  }
  .my-chapters {
    position: absolute;
    top: 0;
    width: 80%;
    z-index: 1;
    & > div {
      background: #eee;
      height: 400px;
      margin: 10px;
      padding: 10px;
    }
  }
}

<div class="my-example">
  <ol class="my-scroll-marker-group">
    <li><a href="#ch1">Chapter 1</a></li>
    <li><a href="#ch2">Chapter 2</a></li>
    <li><a href="#ch3">Chapter 3</a></li>
  </ol>
  <div class="my-chapters">
    <div id="ch1">Chapter 1 content</div>
    <div id="ch2">Chapter 2 content</div>
    <div id="ch3">Chapter 3 content</div>
  </div>
</div>

関連項目

• scroll-marker-group
• scroll-marker-group
• scroll-marker
• target-current

リンク

• https://drafts.csswg.org/css-overflow-5/#propdef-scroll-target-group
• https://caniuse.com/mdn-css_properties_scroll-target-group