詳細を非表示にしているとき、自動的に非表示の詳細の最後まで移動します

これは、Chrome と Firefox(Safari でも近日対応予定)の スクロールアンカリング が原因で発生します。この機能により、ブラウザは表示されている要素に「アンカー」を固定するため、ビューポートの上にコンテンツを挿入してもスクロール位置がずれることはありません。

Firefox にはこの機能のデバッグモードがあり、about:config にアクセスして layout.css.scroll-anchoring.highlight を切り替えることで有効にできます。通常、これはストリーム後の要素にアンカーされることがわかります。

しかし、タイムラインが折りたたまれた状態で下までスクロールしすぎると、タイムラインがアンカーポイントとして選択されます。

@don が言うように、これは DOM 内の要素の順序が表示順序と異なるためです。スクロールアンカーアルゴリズムは DOM を順にたどり、完全なビューポート内にある最初の要素を選択するようです。そのため、折りたたまれたタイムラインが表示されている場合、投稿コンテンツよりも常に先に選択されます。

順序を切り替えることで解決できますが、潜在的な後方互換性の問題が懸念されます。また、何らかの理由でこの順序になっているのか疑問です(スクリーンリーダーのためでしょうか?)。

ここでの最も簡単な修正は、タイムラインに overflow-anchor: none を設定することです。そうすれば、アンカーとして選択されることはありません。

「いいね!」 8