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