CSS - overflow-anchor

• トップ
• CSSリファレンス
• overflow-anchor

概要

説明

ページをスクロールしている際、ページの上部に読み込みの遅いイメージが表示されたり新たな広告が追加された場合などに読んでいた箇所がスクロールしてしまうことがあります。この問題を改善するために Chrome 56 以降などのブラウザでは スクロールアンカリング という機能を実装しており、ページ上部(viewport よりも上部)にコンテンツが追加されてもスクロール位置を保持するように改善しています。ただし、この機能が逆に邪魔となるケースでは overflow-anchor に none を指定することにより無効化することができます。

使用例

下記の様に指定することでページ全体のスクロールアンカリングを無効化することができます。

* {
  overflow-anchor: none;
}

下記のサンプルは通常時と無効化した場合の差異を示します。

.my-example {
  display: flex;
  gap: 1rem;
  .my-box-list {
    flex: 1;
    height: 400px;
    border: 1px solid #ddd;
    text-align: center;
    overflow: scroll;
    .my-box {
      width: 90%;
      height: 60px;
      background-color: #ddd;
      margin: 1rem auto;
    }
  }
}
.overflow-anchor-none {
  overflow-anchor: none;
}

<div class="my-example">
  <div class="my-box-list">
    <div class="my-box">Box#3</div>
    <div class="my-box">Box#2</div>
    <div class="my-box">Box#1</div>
    <button class="my-button">追加</button>
  </div>
  <div class="my-box-list overflow-anchor-none">
    <div class="my-box">Box#3</div>
    <div class="my-box">Box#2</div>
    <div class="my-box">Box#1</div>
    <button class="my-button">追加</button>
  </div>
</div>

document.querySelectorAll(".my-button").forEach((e) => {
  e.addEventListener("click", (e) => {
    const num = e.target.parentElement.querySelectorAll(".my-box").length;
    const my_box = document.createElement("div");
    my_box.classList.add("my-box");
    my_box.innerText = "Box#" + (num + 1);
    e.target.parentElement.prepend(my_box);
  });
});

左側は通常時の動作でスクロールアンカリングが有効です。[追加] ボタンを押すと Box#6 以降 (viewport 外部でコンテンツが追加された場合) はスクロールしません。右側は overflow-anchor: none でスクロールアンカリングを無効化しています。Box#6 以降もコンテンツが追加されるたびにスクロールの移動が発生します。

リンク

• https://drafts.csswg.org/css-scroll-anchoring/#exclusion-api
• https://developer.mozilla.org/ja/docs/Web/CSS/overflow-anchor
• https://caniuse.com/mdn-css_properties_overflow-anchor