How to Debug Vertical/Horizontal Scrollbars

Sharing is Caring

When building websites, it can be really challenging to debug what’s causing unexpected scrollbars.

In this post, I provide a very good solution for debugging scrollbars.

In the past, I would add this css when debugging:

* {
 border: 1px solid red;

For the most part, this can give a good enough idea but it can cause issues because the border is added outside of the element.

Using outline instead of border is a much superior solution because its added inside the element and doesn’t cause anything to expand.

Sharing is Caring

Brian is a software architect and technology leader living in Niagara Falls with 13+ years of development experience. He is passionate about automation, business process re-engineering, and building a better tomorrow.

Brian is a proud father of four: two boys, and two girls and has been happily married to Crystal for more than ten years. From time to time, Brian may post about his faith, his family, and definitely about technology.