マウスでスクロールアンカリングをコントロールしたい

　マストドンのタイムラインで、見ていた投稿が突然下に移動してしまったことがあった気がする。スクロールアンカリングが効いているはずなのに起こった。これは、下端が見えていた上の投稿に突然大きな画像のサムネイル付きリンクが追加されたからだと思う。

　スクロールアンカリングは、見ているWebページのコンテンツの上方に広告などで突然大きなブロックが追加されても、スクロール位置が自動的に調整され、見ている場所が移動しないようにする便利な機能なんだけど、欠点があって、見えている一番上のブロックに突然大きなブロックが追加されると、見ていた下のブロックが下に下がってしまう。例えば、ＡＢＣＤＥというブロックが縦に並んでいて、ＢＣＤが見えていてＣを見ていたとする。その時、突然Ｂ内に縦に長いコンテンツが追加されると、Ｂは下に伸びる。その結果、見ていたＣは下に移動してしまう。見えていないＡに縦に長いコンテンツが追加されても、スクロールアンカリングでＢの上端の位置がずれないように調整してくれるので問題は生じないが、見えているＢに追加された場合は調整してくれない。

　この欠点をGeminiに相談したところ、「見えている要素の内の一番上の要素の上端」（上の例ではＢの上端）ではなく、「マウスのポインターが乗っている要素の上端」が移動しないようにするためのコードを教えてくれた。
　Webページに書き込むコードならば、特定のclassに対して指定するCSSだが、Firefoxのアドオン「Stylus」を使うならば、次のようなコードが働くようにすれば良い。

*{overflow-anchor: none !important;}
*:hover,
*:active,
*:focus-within {
	overflow-anchor: auto !important;
}

　どのように機能するか、確認するためのデモを作った。
　「ボックス追加スタート」ボタンで、一番上に次々にボックスが追加されるが、下のボックスを見るために自分でスクロールした後、最初は「overflow-anchor: auto;」が効いているので、見ている位置は変わらない。「overflow-anchor:切替」ボタンで「overflow-anchor: none;」にすると、見ている位置がどんどん下に移動してしまうが、マウスのポインターを動かしたくない要素の上に置けば移動が止まる。ポインターを外に移すと移動が始まる。
　ただし、CSSの margin で開いているボックスとボックスの間にマウスのポインターを持って行っても、移動は止まらない。また、「常に、overflow-anchor:auto;」のボックスが表示された状態だと、見えている位置は止まったままになる。Geminiによると、上の要素の「overflow-anchor: none;」は無視されて、見えている要素の「overflow-anchor: auto;」が機能するらしい。マウスのポインターが置かれている状態では、その要素の上端が移動しないようになり、「常に、overflow-anchor:auto;」のボックスが表示された状態では、そのボックスの上端が移動しないようになるらしい。

　デモは次の通り。

このボックス：class="child-box"
上に追加される追加ボックス：class="child-box"
マウスでアンカーをコントロールするためのＣＳＳ
.child-box { overflow-anchor: none !important; }
.child-box:hover,
.child-box:active,
.child-box:focus-within {
	overflow-anchor: auto !important;
}

常に、overflow-anchor:auto;

overflow-anchor: auto;