ユーザーがスクロールに求めているのは、スムーズさです。これまで Chrome では、ユーザーがトラックパッドでスクロールしたり、モバイルでページをスワイプしたりするなど、一部の場所ではスムーズなスクロールが実現されていました。ただし、マウスが接続されている場合は、よりジッターの多い「ステップ」スクロール動作になり、見た目がかなり悪くなります。Chrome 49 では、この仕組みが大きく変わります。
多くのデベロッパーは、入力ドリブンのネイティブなスクロール動作の段階的な動作を解決するためにライブラリを使用してきました。その目的は、よりスムーズで視認性の高いものに再マッピングすることです。ユーザーは拡張機能を使用してもこの操作を行います。ただし、スクロールを変更するライブラリと拡張機能には、次のようなデメリットがあります。
- アンビバレントな感覚これは 2 つの方法で現れます。まず、あるサイトではスクロールがスムーズに行われるのに、別のサイトではスムーズに行われない場合があり、ユーザーは不整合を感じて混乱する可能性があります。2 つ目は、ライブラリの物理的なスムーズさは、必ずしもプラットフォームの物理的なスムーズさと一致するとは限らないことです。そのため、動きはスムーズでも、違和感や不気味さを感じられることがあります。
- メインスレッドの競合とジャンクの発生傾向が増加。ページに追加された他の JavaScript と同様に、CPU 負荷が増加します。ページで実行されている他の処理によっては、必ずしも致命的ではありませんが、メインスレッドで長時間実行される処理があり、スクロールがメインスレッドに関連付けられている場合、スクロールが途切れたりジャンクが発生したりする可能性があります。
- デベロッパーはより多くのメンテナンスが必要になり、ユーザーはより多くのコードをダウンロードする必要があります。スムーズなスクロールを行うライブラリは、最新の状態に保ち、メンテナンスする必要があります。また、サイトのページ全体の重量が増加します。
これらのデメリットは、パララックス エフェクトやスクロールに関連するその他のアニメーションなど、スクロール動作を扱う多くのライブラリにも当てはまります。多くの場合、ジャンクが発生し、ユーザー補助の妨げとなり、ユーザー エクスペリエンスの低下につながります。スクロールはウェブのコア インタラクションであるため、ライブラリでスクロールを変更する際は十分に注意してください。
Chrome 49 では、Windows、Linux、ChromeOS のデフォルトのスクロール動作が変更されます。従来の段階的なスクロール動作は廃止され、デフォルトでスムーズなスクロールになります。スムーズ スクロール ライブラリを使用している場合は削除する必要がある場合を除き、コードを変更する必要はありません。
スクロールに関するその他の機能
スクロール関連の機能は他にも開発中です。多くのユーザーは、パララックスや、ドキュメント フラグメント（example.com/#somesection など）へのスムーズなスクロールなど、スクロールに連動した効果を望んでいます。前述のように、現在使用されているアプローチは、デベロッパーとユーザーの両方に有害な場合があります。コンポーザ ワークレットと scroll-behavior CSS プロパティという、この問題の解決に役立つ 2 つのプラットフォーム標準が現在開発中です。
Houdini
コンポジタ ワークレットは Houdini の一部であり、まだ完全に仕様が定められておらず、実装されていません。ただし、パッチが適用されると、コンポーザのパイプラインの一部として実行される JavaScript を記述できるようになります。つまり、一般的に、パララックスなどのスクロール連動エフェクトが現在のスクロール位置と完全に同期された状態を維持できるようになります。現在のスクロール処理では、スクロール イベントがメインスレッドに定期的に送信されるだけであり（他のメインスレッドの処理によってブロックされる可能性もあります）、これは大きな進歩となります。コンポジタ ワークレットや Houdini のその他の新機能にご興味をお持ちの場合は、Surma による Houdini の概要に関する投稿と Houdini の仕様をご覧いただき、Houdini メーリング リストにご意見をお寄せください。
scroll-behavior
フラグメントベースのスクロールの場合は、scroll-behavior CSS プロパティも役立ちます。試してみたい方は、Firefox ですでにリリースされているので、Chrome Canary で 「試験運用版のウェブ プラットフォームの機能を有効にする」フラグを使用して有効にできます。たとえば、<body> 要素を scroll-behavior: smooth に設定すると、フラグメントの変更または window.scrollTo によってトリガーされるすべてのスクロールがスムーズにアニメーション化されます。これは、同じことをしようとするライブラリのコードを使用して維持するよりもはるかに優れています。スクロールのような基本的な機能では、ユーザーの期待を裏切らないようにすることが非常に重要です。そのため、これらの機能が流動的である間は、プログレッシブ エンハンスメント アプローチを採用し、これらの動作をポリフィルしようとするライブラリをすべて削除することをおすすめします。
スクロールする
Chrome 49 以降、スクロールがよりスムーズになりました。ただし、Houdini と smooth-scroll などの CSS プロパティによって、さらに改善される可能性があります。Chrome 49 をお試しいただき、ご感想をお聞かせください。また、可能な限りブラウザにスクロールを任せてみてください。