How to determine what element on the page causes the horizontal scroll?

Read this article in:

It is amazing how gpt can just answer this question, when I've struggled with this for so long.

You can run this in the console to see what the offending elements are:

[...document.querySelectorAll('*')].filter(el => {
  const r = el.getBoundingClientRect()
  return r.right > document.documentElement.clientWidth
}).forEach(el => console.log(el, el.getBoundingClientRect()))

You can also highlight them:

[...document.querySelectorAll('*')].forEach(el => {
  const r = el.getBoundingClientRect()
  if (r.right > document.documentElement.clientWidth) {
    el.style.outline = '2px solid red'
  }
})

.

Please login to post comments: