右端の謎余白を除去する
CSSのレスポンシブ調整が不調な場合、モバイル表示の右端に原因不明の余白が表示されるケースがあります。
特定の要素が不揃いな場合にはまだ探せるのですが、ネガティブmarginが設定されているケースなどツールで探索しても原因が分からないことがあります。
このような場合に原因を切り分けるには、まずツールとしてChromeデベロッパーツールのモバイルエミュレーションモードを利用すると表示環境を再現できます。
モバイルエミュレーションはdevツールの上ナビにあるモバイル端末のアイコンで切り替え可能です。
余白については、CSSのoverflow: hiddenを指定するとほぼ消えます。
ただし、hiddenには副作用もあるため、利用するにしても狭い範囲に指定した方が良いでしょう。
はじめにhtmlやbodyといった外側のタグに指定し、効果があるなら内側のタグにスタイル指定を移していきます。
overflow: hiddenを指定しても余白が残っている場合には、その要素内に原因がないか、または複数の原因があると考えられます。
hiddenの指定要素を変更していき、消去法で絞り込むことによって、最終的に余白を引き起こしている要素を切り分けられます。
要素を特定できたら、overflow: hidden以外のプロパティ変更により解決することも可能でしょう。
コンポーネント内リンクの描画ズレの修正
Javascriptのクライアントサイド・ルーティングを使用している場合、リンク先への遷移時にスクロール位置がリセットされないことがあります。
HTMLのaタグではページトップに遷移するため、利用時の違和感があります。
コンポーネント内リンクのスクロール位置を修正するには、window.scrollTo(0, 0)を遷移処理に追加する必要があります。
たとえばReact向けのRavigerでは、
Link
コンポーネントがaタグの代替となりますが、Link自体には処理を追加できません。“onClick"も機能しませんでした。
そこで、 useLocationChange でhookしてスクロール処理を呼び出します。
該当箇所を抜粋すると、以下のような実装になります。
const scroll_to_top = () => {
window.scrollTo(0, 0);
}
const SomeComponent = (props) => {
useLocationChange(scroll_to_top);
}
useLocationChangeはpath変更ごとに呼び出されるため、個別のLinkには特に追加処理は必要ありません。