JavaScript で特定の要素が overflow しているかどうかをチェックする

JavaScript で特定の要素が overflow しているかどうかをチェックするには、特定の要素の scrollHeight と clientHeight を比較する（縦方向の場合）。

const el = document.querySelector('.container')
const checkOverflow = () => {
  if (el.scrollHeight > el.clientHeight) {
    console.log('overflow');
  } else {
    console.log('no overflow');
  }
}

scrollHeight には、オーバーフローしていて見えない部分の高さも含まれる。一方、 clientHeight には、オーバーフローしている部分が含まれない。

なので、 scrollHeight の方が大きい場合は overflow していることになる。

参考

• Element: scrollHeight property - Web APIs | MDN
• Element: clientHeight property - Web APIs | MDN