ウェブページにアクセスしてコンテンツの一部を読み始めたところ、広告や画像の読み込みによってページがポップアップ表示され、ページ内の位置が分からなくなったことはありませんか?
Chrome 51 の Scroll Anchoring フラグを確認することをおすすめします。
スクロール アンカーは、ページ上の現在地を追跡し、リフローの原因となるものがページ上の位置を乱すことを防ぎます。
この機能を試すには、次の手順を行います。
- Chrome Dev / Canary で chrome://flags/#enable-scroll-anchoring に移動します。
- プルダウンから [有効] を選択します。
- 画面下部の [今すぐ再起動] をクリックします。
これにより、スクロール アンカーが有効になります。
Google ではこの技術を長い間使用しており、ウェブ上のすべてのユーザーにとってエクスペリエンスが大幅に向上すると考えていますが、すべての環境で確実に機能するようにしたいと考えています。スクロール アンカーがページのリフローを処理できなかった例や、介入すべきでなかった例を見つけた場合は、ぜひお知らせください。
予期しない動作が発生した場合は、g.co/reportbadreflow のフォームに記入してフィードバックをお送りください。
よくある質問
この変更は JavaScript のスクロールにどのような影響がありますか?
簡単に言うと、できません。
この変更により、再フローの原因となるスクロールの効果が変化します。たとえば、要素にクラス名を追加して高さを増やすと、再フローがトリガーされ、スクロール アンカーリングによってページがジャンプするのを防ぐことができます。
window.scrollTo(0, 1)
を呼び出す(古いハックです)と、再フローは発生せず、正常に動作します。タッチイベントも同様です。
スクロール アンカーがページに影響している例を見つけた場合は、g.co/reportbadreflow のフォームからフィードバックを送信してください。