Webサイトで予期せぬ横スクロール発生時はConsoleで一発判定

予期せぬ横スクロール発生

Webサイトを作成しているとブラウザで予期せぬ横スクロールが発生してしまうことがある。

ブラウザで予期せぬ横スクロールが発生するのはCSSで幅の計算などを間違えて表示領域を超えてしまうことが原因だ。

例えばこちらのサンプルをブラウザで見ると横スクロールが発生している。

一般的に横スクロールが発生している要素の確認する際はCSSの全称セレクタ（ユニバーサルセレクタ）でoutlineを付けて確認されることが多い。

* {
  outline: 1px solid red;
}

しかし、CSSに追加するのは若干面倒なのでブラウザのデベロッパーツールのConsoleで以下のJavaScriptを実行したほうが簡単にoutlineを追加できる。

$$("*").forEach(v => v.style.outline = '1px solid red')

outlineを追加して枠線が外にはみ出している要素があったら、それが横スクロールが発生している原因の要素となる。

はみ出している要素をJavaScriptで検出するには要素がdocument.documentElement.clientWidthを超えているかで確認可能。

※ほかにも横スクロールの原因にはpositionのleftやnowrapなどが考えられるがこれらをJavaScriptで検出するのは厳しい。

var w = document.documentElement.clientWidth
$$("*").forEach(v => {
  if (w < v.clientWidth) {
    console.log(v)
  }
})