「キャンセル可能」スムーズなスクロール

次のテキストは、元の意味を維持し、画像の元の形式と位置を保存しながら、提供された入力を書き直します。

この記事では、滑らかなスクロールのユーザーエクスペリエンス（UX）を扱い、特にスクロールアクションを中断する機能に焦点を当てています。多くのウェブサイトは、滑らかなスクロールで「上部にスクロールする」ボタンを実装しています。ただし、現在のブラウザの動作は、ユーザーがこのスムーズなスクロールを後続のスクロールアクションで中断できるかどうかに関して異なります。この中断可能な動作は、正のUXにとって重要です。

このシナリオを考慮してください。ユーザーが「スクロールする」ボタンをクリックして、滑らかなスクロールを開始します。クロールの中で、彼らは何か面白いことに気づき、上向きの動きを止めたいと思っています。理想的には、マウスホイールまたはトラックパッドを使用した小さなスクロールは、滑らかなスクロールを中断する必要があります。これは、中断可能な滑らかなスクロール（「キャンセル可能」よりも正確な用語）と呼ばれるものです。

次のデモは問題を示しています。

CSSとJavaScriptで実装された場合、クロスブラウザーの矛盾は、スムーズなスクロールの動作に存在します。さまざまなブラウザにわたる観測の要約を次に示します。

滑らかなスクロールのUXを改善するために、以下を提案します。

• 中断可能な滑らかなスクロール： CSSであるかJavaScriptベースであるかに関係なく、スムーズなスクロールは、後続のユーザースクロールアクションによって中断可能である必要があります。
• 速度の標準化：ブラウザは、スムーズなスクロールの速度を標準化するか、開発者がそれを制御できるようにする必要があります。一貫性のある中程度の速度は、スクロール距離とは無関係に望ましいです。
• Safariの互換性： Safariは、一貫した滑らかなスクロール動作を実装する必要があります。これは、SafariがiOSのデフォルトのブラウザであるモバイルデバイスにとって特に重要であり、JavaScriptのないカルーセルなどの機能でスムーズなスクロールを使用できるようにします。

現在の標準化の欠如は、プラットフォームとブラウザー間で一貫したユーザーフレンドリーなスクロールエクスペリエンスの作成を妨げます。 Webブラウジングエクスペリエンス全体を改善するには、より統一されたアプローチが必要です。

以上が「キャンセル可能」スムーズなスクロールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。