Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

overflow-anchor

overflow-anchor は CSS のプロパティで、コンテンツの移動を最小化するためにスクロール位置を調整する、ブラウザーのスクロール固定の動作をオプトアウトする方法を提供します。

スクロール固定の動作は、対応しているすべてのブラウザーで既定で有効になっています。したがって、このプロパティを変更するのは通常、文書または文書の一部でスクロール固定によって操作上の問題が発生し、この動作をオフにする必要がある場合のみです。

スクロール安定化アンカリング

対応ブラウザ

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

CSS

.dynamic-content {
  overflow-anchor: none;
}
.stable-content {
  overflow-anchor: auto;
}

CSS の anchor: none パターンです。

CSS の anchor: auto パターンです。

CSS のチャット風UI パターンです。