scroll-areas

スクロール領域

原則としてスクロール領域は避ける

レイアウト内のスクロールコンテナー（パネル、ドロワー、テーブル、内部でオーバーフローするモーダルなど）は、ユーザーに負担をかけます。ユーザーはその領域がスクロールすることに気づき、複数の独立したスクロール位置を同時に管理し、同じ画面上にあるスクロール領域間でコンテキストを切り替えなければなりません。

デフォルトでは、ページをスクロールさせます。 ページ全体のスクロールは誰にでもわかりやすく、気づく必要もありません。内部スクロール領域を導入する前に、オーバーフローをページ自体で処理できるよう、レイアウトを再構成できないか検討してください。

内部スクロールの代替案：

• 長いリストにはページネーションまたは「さらに読み込む」
• 長い詳細パネルには折りたたみ可能なセクション（アコーディオン）
• スクロール領域を埋め尽くすコンテンツには、別のページまたはルート
• 段階的な情報開示 — デフォルトでは少なめに表示し、必要に応じて展開する

スクロール領域が妥当な場合

一部のレイアウトでは、内部スクロールが本当に必要です。

• 固定高さのサイドバーに、ビューポートより長いナビゲーションツリーがある場合
• 行をスクロールしている間もヘッダーを表示しておく必要があるデータテーブル
• ストリームが連続し、周囲のレイアウトが固定されているチャットまたはログパネル
• 大規模なアプリケーションシェルに埋め込まれたコードエディターまたはターミナルペイン

このような場合は進めてかまいませんが、以下の制約を適用してください。

一方向のみ

縦横両方向に同時にスクロールするスクロールコンテナーは作成しないでください。二方向へのスクロールは混乱を招き、正確な操作が難しく、タッチデバイスではほとんど使いものになりません。

/* One axis: vertical */
overflow-y: auto;
overflow-x: hidden;

/* One axis: horizontal (e.g. wide table) */
overflow-x: auto;
overflow-y: hidden;

/* Never */
overflow: auto; /* allows both axes */

コンテンツに両方向のスクロールが必要な場合（たとえば、幅の広いテーブルを制約されたパネル内に配置する場合）は、テーブルの横スクロールだけが表示内の唯一のスクロールとなり、その時点ではページ自体がスクロールしないようにレイアウトを再構成してください。

常にユーザーが操作する

ユーザーの意図なしにスクロールが自動的に発生してはなりません。具体的には、次のとおりです。

• 自動スクロールは禁止 — ユーザーが開始していないのにビューポートを移動させないでください
• スクロールの乗っ取りは禁止 — ネイティブのスクロールイベントを横取りして、人工的にアニメーションさせたり速度を調整したりしないでください
• 読み込み時のスクロール移動は、以前のスクロール位置を復元する場合（たとえば、別の画面に移動したあとでリストに戻る場合）に限り許容されます
• エラーやアンカーへのスクロール移動は、フォームをエラー付きで送信する、目次リンクをクリックするといったユーザー操作への応答として許容されます

例外：チャットおよびログパネルでは、新しいコンテンツが追加されたとき、ユーザーがすでに最下部にいる場合に限り、最下部まで自動スクロールしてもかまいません。ユーザーが上にスクロールして読んでいる場合は、無理に最下部へ戻さず、代わりに「新しいメッセージ」のインジケーターを表示してください。

スクロールの手がかり

ユーザーがスクロールを試みる前に、その領域がスクロール可能だとわかるようにしてください。

• 端でコンテンツを視覚的に切り取り、途中まで見える項目で「続きがある」ことを示す
• 控えめなスクロールバーを使用する（scrollbar-width: none は使わない）。トラックが見えるようにしてください
• タッチ操作では、端で項目が途中まで見えることが主な手がかりになります。コンテナーの末端側に overflow: hidden を設定しないでください

レビューチェックリスト

• すべての内部スクロール領域は本当に必要ですか。それとも、ページスクロールを使用するようにレイアウトを再構成できますか？
• すべてのスクロールコンテナーは一方向にだけスクロールしますか？
• すべてのスクロールコンテナーで、二方向の overflow: auto を避けていますか？
• スクロールは常にユーザーが開始していますか — 乗っ取りや強制的な自動スクロールはありませんか？
• スクロール可能な領域が視覚的にわかりますか（途中まで見えるコンテンツ、表示されるスクロールバー）？
• タッチデバイスで、スクロールは滑らかでネイティブですか（-webkit-overflow-scrolling: touch または同等の機能）？