CSSスクロールスナップ ユーザーがスクロール操作を実行したときに、Web サイトが Web ページまたはその他のスクロール コンテナーを特定のスクロール位置にスナップできるようにします。 この機能は すべての最新ブラウザでサポート XNUMX 年以上にわたって使用されてきましたが、その恩恵を受ける可能性のある多くの Web サイトはまだ使用していません。
スクロール スナップは、おそらく水平カルーセルに最も関連しています ( Chris の CSS のみのアプローチ) および特定の Web ページをフルスクリーン スライドに分割します。 しかし、なぜそこで止まるのですか？ グリッドまたはフィードに項目を配置する Web ページでは、スナップを使用するとスクロール エクスペリエンスが向上すると思います。
たとえば、ほとんどのショッピング Web サイトでは、商品がグリッドで表示されます。 理想的には、ユーザーは最小限の労力でグリッド行間をジャンプしたいと考えています。 ユーザーは押すことができます スペース ページをおおよそ XNUMX 画面 (ビューポートの高さ) だけスクロールしますが、グリッド行の高さによっては、スクロール位置が最終的にグリッドと「同期しなくなり」、ユーザーが手動で再調整する必要があります。
このページにスクロール スナップを追加すると、ユーザーは一貫して次の行にスクロールできます。 スペース キー（押す シフト + スペース 前の行にスクロールします)。 それはかなり楽です。
スクロール スナップは、この Web サイトへの追加として歓迎されると思います。 また、実装もそれほど複雑ではありません。 この例で使用した CSS コードは比較的単純です。
html {
scroll-snap-type: y proximity;
}
.product-item {
scroll-snap-align: start;
scroll-margin-top: 75px; /* height of web page’s sticky header */
}定期的にアクセスする Web サイトにまだスクロール スナップが追加されておらず、スクロール エクスペリエンスが向上すると思われる場合は、待つ必要はありません。 ユーザー スタイルを使用して、自分でスクロール スナップを追加できます。
Web サイトへのユーザー スタイルの追加
上のビデオでは、Safari の詳細設定で user.css ファイルを選択したことがわかります。 このファイルはユーザー スタイル シートです。 私が書いたCSSスタイルが含まれており、ローカルに保存されています .css ファイルに追加され、Safari に追加されます。 これらの「ユーザー スタイル」は、Safari で開くすべての Web ページに適用されます。
Chrome と Firefox では、ユーザーはユーザー スタイル シートを選択できません。 Firefox は、 userContent.css 以前は、その機能は廃止され、 デフォルトでは無効 2019年に。 スタイラス ブラウザ拡張機能 これら XNUMX つのブラウザー (およびその他の Chromium ベースのブラウザー) 用。
Stylus の大きな利点の XNUMX つは、特定の Web サイトや URL のユーザー スタイルを記述できることです。 Safari のユーザー スタイル シートはすべての Web サイトに適用されますが、これは回避できます。 :has() 疑似クラス 特定の Web サイトのみに一致するセレクターを作成する.
CSS Cascading モジュールは、 ユーザーの起源 ユーザーが追加するスタイルの場合。 Safari のユーザー スタイル シートはこのオリジンに属しますが、Stylus 拡張機能は、Web サイトのスタイル シートが存在する Author Origin にユーザー スタイルを挿入します。 具体的には、Stylus はユーザー スタイルをページに直接挿入します。 <style> の終わりにある要素 <html> それはそれを作ります ページ上の最終的なスタイル シート. 技術的には、これは Stylus を介して追加されたスタイルがユーザー オリジンにないため作成者スタイルとして分類されることを意味しますが、ユーザーがスタイルを追加するため、引き続きユーザー スタイルと呼びます。
ただし、この違いはカスケードに影響するため、覚えておく価値があります。 セレクターの特異性が等しい場合、実際のユーザー スタイルはページ自体のスタイルよりも弱くなります。 これにより、ユーザー スタイルが優れたものになります。 ユーザーのデフォルトに適合. 同じ条件で、Stylus 経由で追加されたスタイルは 強い そのため、Stylus を使用してユーザーの既定値を簡単に定義することはできません。
追加すれば !important 実際のユーザー スタイルと Stylus を介して追加されたスタイルの両方が、ページのスタイルよりも強力です。 したがって、Web サイトにユーザー スタイルを適用したい場合、Safari の「スタイル シート」オプションを使用するか、Stylus 拡張機能を使用するかは問題ではありません。 君の !important スタイルはどちらの方法でも勝ちます。
次のセクションでは、 !important Twitter の Web サイトのタイムライン ページでスクロール スナップを強制するユーザー スタイル。 私の目標は、一番上のつぶやきが部分的にしか画面に表示されないという厄介なスクロール位置を避けることで、私の Twitter タイムラインを読むプロセスをスピードアップすることです。
Twitterのタイムラインのスクロールスナップ
いくつかの実験の後、次の CSS コードに落ち着きました。 これらのスタイルは Firefox ではうまく機能しますが、Chrome と Safari ではいくつか問題が発生しました。 これらの問題については記事の後半で詳しく説明しますが、ここでは Firefox での動作に焦点を当てましょう。
html {
scroll-snap-type: y mandatory !important;
}
/* tweets in the timeline are <article> elements */
article {
scroll-snap-align: start !important;
}
/* un-stick the sticky header and make it “snappable” as well */
[aria-label="Home timeline"] > :first-child {
position: static !important;
scroll-snap-align: start !important;
}
/* hide the “new Tweets available” floating toast notification */
[aria-label="New Tweets are available."] {
display: none !important;
}追加する必要があります !important カスタム スクロール スナップの実装が正しく機能するためには、すべてのユーザー スタイルが Web ページ独自のスタイルを優先する必要があるためです。 繰り返し書くのではなく !important、ユーザー スタイルを「重要なレイヤー」に配置することもできますが、 そのような CSS 機能は存在しません （まだ）。
下のビデオを見て、私のスクロール スナップ ユーザー スタイルの動作を確認してください。 を押すたびに、 スペース キーを押すと、次の一連のツイートがスクロールして表示され、各セットの最初のツイートがビューポートの上端に揃えられます。 これにより、タイムラインをより速く読むことができます。 前の一連のツイートに戻る必要がある場合は、 シフト + スペース.
このタイプのスクロール スナップで私が気に入っているのは、押すたびにページがどこまでスクロールするかを予測できることです。 スペース. 各スクロール距離は、画面全体に表示されているツイートの高さの合計に等しくなります。 つまり、画面の下部に部分的に表示されているツイートが画面の上部に移動します。これはまさに私が望んでいることです.
Space Dave のツイートを画面上部にスクロールします。自分の Twitter タイムラインで私のスクロール スナップ ユーザー スタイルを試すには、次の手順に従います。
- インストール スタイラスエクステンション Firefox アドオンまたは Chrome Web Store で。
- Twitter のタイムラインに移動します。 https://twitter.com/home.
- ブラウザのツールバーにあるスタイラス アイコンをクリックし、ポップアップで [この URL] をクリックします。
- Stylus は新しいブラウザー タブでコード エディターを開きます。 スクロール スナップのユーザー スタイルをエディターにコピー アンド ペーストし、左側のサイドバーにある [保存] ボタンを押します。 スタイルはすぐに Twitter のタイムラインに適用されます (ページをリロードする必要はありません)。
- スタイルはいつでも更新できます。 スタイラス アイコンと鉛筆アイコンをクリックして、エディタを再度開きます。
スナップをオーバーライドできない
Twitter のタイムラインのスクロール スナップの実装には、大きな欠陥が XNUMX つあります。 ツイートの高さがビューポートよりも高い場合、ページをスクロールしてそのツイートの下部を表示することはできません (たとえば、そのツイートをいいねまたはリツイートしたい場合)。ブラウザーは強制的にページをスナップして上部を表示するためです。ツイート（または次のツイートの上部）。
この問題の重大度は、ユーザーのディスプレイによって異なります。 小さなページ ズーム率で大きなデスクトップ モニターで Twitter のタイムラインを表示すると、ビューポートよりも高いツイートに遭遇しない場合があります。
私は CSS Working Group に、ユーザーが ブラウザの必須スクロール スナップを無効にする. この問題は、少なくとも理論的には、 mandatory 〜へ proximity スナップ。 私はテストしました proximity Chrome と Firefox でスナップすると、一貫性がなく、混乱することがわかりました。 ブラウザは、私が予期していなかったときにスナップすることがよくありました。 たぶん、Twitter のコードが proximity アルゴリズムに関して言えば、ブラウザにはまだ少しバグがあります。あるいは、それが可能であるとしても、単に「スクロールが間違っている」だけかもしれません。 知らない。
しかし、私が一緒に行った主な理由は mandatory スナップは、スクロール後に一番上のつぶやきが部分的にしか画面に表示されない状況を回避したかったためです。 上のビデオで示した一連のツイート間の高速スクロールは、次の場合にのみ可能です。 mandatory スナップ。
あなたが、私のように、好むなら mandatory 「背の高いつぶやき」の問題については、次の XNUMX つの回避策を提案できます。
- ツイートを独自のページで開き、後でタイムラインに戻ることができます。
- いいねボタンやリツイートボタンのみクリックしたい場合は、 シフト-ツイートをクリックして選択し、 を押します L 好きになるか、 T 続い 入力します それをリツイートします。
Chrome と Safari の問題
私のスクロール スナップ ユーザー スタイルは、Chrome、Safari、および Firefox で著しく異なるスクロール スナップ動作を生成します。 これらの違いの一部は、スナップ メカニズムの正確な実装が ブラウザ任せ:
CSS スクロール スナップ モジュールは、スナップ位置を強制するために使用される正確なアニメーションや物理を意図的に指定したり、強制したりしません。 これはユーザーエージェントに任されています。
現在のバージョンの Safari には、Twitter タイムラインでスクロール スナップが正しく機能しないというバグがあります。 私は持っている このバグを報告しました.
Chrome では、次の問題が発生しました。
- スクロール操作のアニメーションに一貫性がありません。 アニメーションが遅い場合もあれば、瞬時に表示される場合もあり、開始が遅くてもすぐに切れてしまう場合もあります。 これはイライラしました。
- スクロール操作のアニメーションは一般的に遅すぎます。 Chrome と Firefox でテストを実行しました (20 スペース また、Chrome では Firefox よりも Twitter タイムラインで同じ距離をカバーするのに 70% 長い時間がかかりました (Chrome では 18.5 秒、Firefox では 11 秒)。
- ラップトップのトラックパッドを使用してスクロールすると、ページがちらつきます。 を押したまま高速スクロールしようとすると、 スペース キーを押すと、ページのスクロールが非常に遅くなり、振動します。 両方の問題が同じアルゴリズムによって引き起こされていると思われます。 これらの場合、Chrome は非常に高い速度で再スナップするようです。 私は持っている このバグを報告しました.
これらのブラウザーのバグとブラウザー間の違いは、スクロール スナップの実装を検討している Web サイトにとって問題になる可能性があります。 たとえば、Web 開発者は、ある特定のブラウザーでのスクロール スナップの動作が気に入らないため、躊躇する場合があります。 ブラウザーは相互運用性を高めることで、この問題を軽減できます。 実際、スクロール スナップは、クロス ブラウザーの重点分野の XNUMX つです。 Interop 2022 の取り組み.
状況を改善するもう XNUMX つの方法は、スクロール スナップをより構成しやすくする新しい CSS プロパティを導入することです。 これには、スナップ アニメーションの長さ、スナップの近接しきい値の長さ、必須のスナップをオーバーライドするメカニズムが含まれます。
スナップするかしないか？
Twitter のタイムラインでスクロール スナップ ユーザー スタイルを数週間使用していますが、もう戻りたくありません。 フィードだけをすばやくめくる機能 スペース キーは別のレベルにあります。
ただし、これはおそらく万人向けではない高度な機能だと思います。 タイムラインでのみ有効にしたのには理由があります (/home パス) であり、Twitter の Web サイトの他の場所にはありません。 スナップは、ページのスクロール方法の大幅な変更であり、慣れるまでに時間がかかります。 特定のユースケースではうまく機能しますが、邪魔になり、ユーザーを苛立たせることもあります。
したがって、フィードを使用する Web サイトでは、慎重に検討し、さまざまなブラウザーやさまざまな入力方法 (マウス、キーボード、トラックパッド、タッチ スクリーンなど) で十分にテストした後、スクロール スナップをオプション機能としてのみ提供することを検討する必要があります。
行く前に…
最後に、インストールして試してみることを強くお勧めします。 スタイラス ブラウザ拡張機能. Web 開発者 (または CSS を知っている人) は、ブラウザーで Web サイトのスタイルを設定することができます。 お気に入りの Web サイトにマイナーな改善や修正を適用できます。 私は主に、スティッキー ヘッダー、ビデオ ポップアップ、投票数など、煩わしいページ要素を非表示にするために使用しています。
しかし、もっと重要なことは、Stylus を使用すると、任意の Web サイトで新しい CSS 機能をすばやくテストし、必要に応じてブラウザーのバグを報告できることです。 これを行うことで、Web プラットフォームを少し改善することができます。
