水平スクロール発生時の原因特定に使える便利スニペット

ページ内で意図しない水平スクロールが発生してしまった際、パッと見で該当箇所が見つからないとか他からの引き継ぎで修正する必要がある場面で、原因となる要素を見つけるのに使える便利スニペットです。

JavaScriptで要素特定

デベロッパーツールを開いてConsoleで下記を実行すると、ドキュメントサイズよりも大きい、つまり横スクロールが発生しているであろう要素を出力してくれます。
該当するものがなければundefinedのみが出力されます。

let docWidth = document.documentElement.offsetWidth;
[].forEach.call(document.querySelectorAll('*'), (el) => {
  if ( el.offsetWidth > docWidth ) console.log(el);
});

CSSで視覚的に特定

CSSのデバッグ手法として昔から利用されている方法で、全要素にアウトラインをつけることでどの要素がはみ出しているか（横スクロールが発生する原因となっているか）を視覚的に確認するのに使えます。
下記をCSSファイルに直接記述、もしくは該当のページでデベロッパーツールを開いて新規スタイル（ChromeであればElementsタブで「New Style Rule」から追加）として記述します。

* {
  outline: 1px solid red;
}