← Playgrounds一覧に戻る
Playground
表示領域より上に要素を足したときの補正を見る
途中までスクロールしたリストの先頭に要素を追加し、overflow-anchorがautoのときとnoneのときで見えている要素がずれるかを比較できます。
アイテム 1
アイテム 2
アイテム 3
アイテム 4
アイテム 5
アイテム 6
アイテム 7
アイテム 8
アイテム 9
アイテム 10
アイテム 11
アイテム 12
途中までスクロールした状態で先頭に要素を足します。右の帯は領域全体を縮めた地図で、上の塗りが追加した要素、枠がいま見えている範囲です。autoでは枠が追加した高さのぶん下へ動いて見えているアイテムが留まり、noneでは枠が動かず、見えていたアイテムが下へ押し出されます。
Playground
高さが変わる要素を候補から外す
表示領域の上端にあるスケルトンが読み込み完了で背が高くなるとき、スケルトンにoverflow-anchor: noneを付けた場合と付けない場合で、直後のアイテムが押し出されるかを比較できます。
アイテム 1
アイテム 2
アイテム 3
アイテム 4
読み込み中のスケルトン
アイテム 6
アイテム 7
アイテム 8
アイテム 9
アイテム 10
スケルトンが表示領域の上端をまたいだ状態で、読み込み完了で背が高くなります。スケルトンがアンカーノードのままだと、その上端は動かないので直後のアイテムが押し出されます。overflow-anchor: noneを付けると直後のアイテムがアンカーノードになり、高さの差だけスクロール位置が補正されて、見えていたアイテムはその場に留まります。