Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations.
Debug unwanted scrollbars
Sometimes scrollbars appear on a web page in places we don't want them to. And when this happens, it's not always very straightforward to fix the problem. Which container is responsible for the scrollbars in the first place? Which elements are even causing the scrollbars to appear? Why are they too big?
All very good questions that can cause a lot of time lost and frustration.
In Firefox
In the Inspector panel, where the DOM tree of the page is displayed, you will notice scroll badges next to all elements that have scrollbars!
This takes care of our first question: which element is scrolling? As for the second question: which elements are causing the scrolling, if you just click on one of the scroll badges, the Inspector will jump to the element (or elements) that caused the scrollbars to appear and highlight them for you!
Now this feature won't answer our third question: Why are these elements too big? But once you know which elements are the root cause of the problem, you can use the Rules siderbar pane to figure out which CSS properties are responsible for it.
In Polypane
When a page has a horizontal scrollbar, Polypane will display an Overflow icon below it. This will tell you why there is a horizontal overflow: either there are elements that are too wide or there is a 100vw applied to the page.
After clicking the icon, Polypane finds the elements causing an overflow in your page and highlights them in red.
From here, you can inspect the element and find the cause of the problem.
