フォーカス中のボタンを一部隠すチャットボタン

チャットボタンは画面右側の下4.5remを覆い、ページはその下をスクロールします。ブラウザーが表示中とみなしたボタンは、半分隠れたまま止まります。ページ最後の行は、チャットボタンの上までスクロールできません。

scroll-padding-bottom は、画面下の帯が実際には見えていないことをブラウザーに伝えます。そこでフォーカスを受けた要素は、チャットボタンの手前まで上にスクロールされます。main の終わりの余白で、最後の行もそこまでスクロールできます。どちらもチャットボタンと同じトークンから取るため、ずれません。ただし、チャットボタンがその大きさを保っている間だけ有効です。幅の広い「チャットで質問」の形に変わったりパネルとして開いたりする場合は、確保する余白も広げる必要があります。下にCookieバナーが出る場合は、二つの高さを足します。余白は画面幅いっぱいの帯になるため、高さの低い画面では表示できる量が減ります。

どちらも基準を満たします。scroll-padding は、デザインで求められた浮いたチャットボタンを保てて、数行のCSSで済みます。ただし、確保する余白がどの状態でもチャットボタンと一致している必要があり、外部のウィジェットは知らないうちに大きさを変えることがあります。ヘッダーへ移す方法は、計測なしで重なりそのものをなくせますが、デザインが変わり、スクロールするとチャットボタンが見えなくなります。浮いた隅の配置が必須で、チャットボタンの大きさを管理できる場合は scroll-padding を、テンプレートを変更できる場合やウィジェットの大きさを管理できない場合はヘッダーへの移動を選んでください。

ページに重なる要素は、それぞれ余白を確保するかレイアウトの中に置く必要があるため、すべて数えてください。

• チャットボタン。幅の広い形に変わったり、パネルとして開いたりすることがよくあります。
• 「ページ上部へ」ボタン。たいていスクロールした後にだけ現れます。
• Cookieやキャンペーンのバナー。チャットボタンと同時に出ると、高さが足し合わされます。
• 固定ヘッダー。上に戻るときに画面の上部を覆います。

続きがあることを示すために画面下に置くフェードやグラデーションは、要素が透けて見えていても、2.4.12では隠していることになります。その高さも確保するか、取り除いてください。チャットボタンの影もボタンの一部なので、間隔に含めます。

この基準が対象とするのは、フォーカス中の要素であり、フォーカスの枠ではありません。それでも、枠のオフセットもチャットボタンに重ならないよう、十分な間隔を空けてください。そうしないと、見えないのが枠になることがあります。

外部のチャットウィジェットは、たいてい独自の固定表示の要素を追加します。提供元が位置の調整や非表示に対応しているかを確認し、実際に表示される大きさから余白を決め、ウィジェットの更新後に再確認してください。ウィジェットがページに重なる非モーダルのパネルを開く場合は、覆う範囲がずっと広くなります。開いている間はその高さを確保するか、フォーカスをパネルに移し、閉じたときに戻してください。