Chromeはスクロールアンカーで迷惑なページジャンプをターゲットにします

私たちは皆それをしました。携帯電話で記事を開くと、コンテンツにアクセスしているときに、魔法のようにページの途中まで移動して、少しイライラします。


画面外のコンテンツは、これらの不要なページジャンプの背後にある通常の原因です。広告、画像、その他のWeb要素は、読んでいる間、表示領域の外側に読み込まれ続けます。コンテンツの上または下の特定のオブジェクトが読み込まれると、表示されたコンテンツが上下に押し上げられます。確かに腹立たしい。

Chromeバージョン56以降では、新機能のスクロールアンカーを使用して、この厄介な影響を最小限に抑えるための措置を講じています。


スクロールアンカーは、本来の機能を正確に実行します。これはページのコンテンツを固定し、表示しているセクションはそのまま残りますが、ロード中のコンテンツは不要なページジャンプを防ぐために上下にプッシュされます。下のビデオの違いをチェックしてください。

科学は完璧ではありません。特定のサイトには、この機能が機能するのを妨げる可能性のあるさまざまな要素があります。しかし、Chromeブログによると:

現在、ページビューあたり平均3回近くのジャンプを防いでいますが、それでも改善は進んでいます。

スティーブ神戸のキーワード経由

まれに、Web開発者がスクロールアンカーを無効にする必要がある場合、彼らもそれを考えました。 Overflow-anchorスクロールアンカー機能を無効にするか無視するようにChromeに指示する単純なCSSトリックです。 overflow-anchorについて詳しく知ることができます開発者リポジトリにあります。

これらの効果は、画面が小さく、ビューポートの外側に多くのコンテンツがあるため、モバイルデバイスで最も顕著になります。このアップデートは小規模かもしれませんが、ユーザーエクスペリエンスがウェブの成否を左右し、Chromeはそのエクスペリエンスを少しスムーズにしました。ありがとう!

ソース: キーワード