滑らかなスクロール（Chrome 49）

ユーザーがスクロールに本当に求めるものが 1 つあるとすれば、それはスムーズであることです。これまで Chrome では、ユーザーがトラックパッドでスクロールしたときや、モバイルでページをフリングしたときなど、いくつかの場所でスムーズにスクロールできていました。しかし、ユーザーがマウスを接続すると、「段階的」なスクロール動作のジッターが大きくなり、見た目の面白さが大幅に低下します。Chrome 49 では、この点がすべて変更されます。

多くのデベロッパーにとって、段階的なネイティブの入力駆動型スクロール動作に対する解決策は、ライブラリを使用することでした。この目的は、よりスムーズで見やすいものに再マッピングすることです。ユーザーも拡張機能を使用してこれを実現しています。ただし、ライブラリと拡張機能の両方に、スクロールを変更する欠点があります。

  • 不気味な谷を感じる。これは 2 つの形で現れます。1 つ目は、あるサイトではスムーズなスクロール動作ができても、別のサイトではスムーズでない可能性があるため、ユーザーは一貫性がないために混乱を感じる可能性があります。第二に、ライブラリの滑らかさの物理特性は、プラットフォームの実際の滑らかさと必ずしも一致しません。そのため、動きは滑らかでも、違和感や不思議な印象を与えかねません。
  • メインスレッドの競合やジャンクが発生する傾向が強まる。ページに JavaScript を追加した場合と同様に、CPU 負荷は増加します。ページの他の処理内容にもよりますが、これは必ずしも問題ではありませんが、メインスレッドで長時間実行処理があり、スクロールがメインスレッドに結合している場合、スクロールの途切れやジャンクが発生することがあります。
  • 開発者のメンテナンスが増え、ユーザーがダウンロードするコードが増えます。スムーズなスクロールを行うためのライブラリは、常に最新の状態に保ち、維持する必要があります。そうすると、サイト全体のページ ウェイトが増大します。

このような欠点は、視差効果やその他のスクロールと連動したアニメーションなど、スクロール動作を扱う多くのライブラリにも当てはまります。これらはすべて、ジャンクを引き起こし、アクセシビリティを妨げ、一般的にユーザー エクスペリエンスを損なうことが多々あります。スクロールはウェブの中核的な操作であり、ライブラリで変更を加える場合は細心の注意を払う必要があります。

Chrome 49 では、デフォルトのスクロール動作が Windows、Linux、ChromeOS に変更されます。従来の段階的スクロール動作は廃止され、デフォルトで滑らかになります。コードを変更する必要はありませんが、スムーズ スクロールのライブラリを使用していた場合は削除するかもしれません。

その他のスクロール アイテム

この作品には他にも注目に値するスクロール関連のアイテムがあります。パララックスやドキュメント フラグメントへのスムーズなスクロール（example.com/#somesection など）など、スクロールと連動した効果を多くの人が望んでいます。前述のように、現在使用されているアプローチは、多くの場合、デベロッパーとユーザーの双方に悪影響を及ぼす可能性があります。これに役立つと思われる 2 つのプラットフォーム標準が開発中です。それは、コンポジタ ワークレットと scroll-behavior CSS プロパティです。

フーディーニ

コンポジタ ワークレットは Houdini の一部であり、まだ完全に仕様化されておらず、実装もされていません。とはいえ、パッチが到着すると、コンポジタのパイプラインの一部として実行される JavaScript を作成できるようになります。これは一般的に、パララックスのようなスクロールと結合された効果が現在のスクロール位置と完全に同期していることを意味します。現在のスクロール処理では、スクロール イベントがメインスレッドに定期的にしか送信されず（他のメインスレッドの処理によってブロックされる可能性がある）ことを考慮すると、これは飛躍的な進歩を遂げることでしょう。コンポジター ワークレットや、Houdini が提供するその他の魅力的な新機能にご興味がある場合は、Surma による「Intro to Houdini」の投稿と Houdini の仕様を参照して、Houdini のメーリング リストにご意見をお寄せください。

スクロール動作

フラグメント ベースのスクロールについては、scroll-behavior CSS プロパティも役立つ可能性があります。すでに Firefox でリリースされているため、この機能をお試しになりたい場合は、Chrome Canary で [試験運用版のウェブ プラットフォーム機能を有効にする] フラグを使用して有効にできます。たとえば、<body> 要素を scroll-behavior: smooth に設定すると、フラグメントの変更または window.scrollTo によってトリガーされるスクロールがすべてスムーズにアニメーション化されます。これは、同じことを行うライブラリのコードを使用して保守するよりもはるかに優れています。スクロールなどの基本的な機能では、ユーザーの期待を損なわないことが非常に重要であるため、これらの機能は流動的ですが、プログレッシブ エンハンスメント アプローチを採用し、これらの動作を多用しようとするライブラリを削除する価値があります。

スクロールして

Chrome 49 以降、スクロールがより滑らかになっています。ただし、それだけではありません。Houdini や、smooth-scroll などの CSS プロパティを通じて、改善の余地がある可能性があります。Chrome 49 をお試しいただき、ぜひご感想をお聞かせください。何より、スクロールはできるだけブラウザで行ってください。