My dashboard app is a single page – never longer than 100vh.
In a certain place, when I click a button, some unknown container temporarily overflows and a scrollbar appears on the right side, and then one second later it disappears. During that one second, the page background jumps very noticeably.
I wish to prevent this scrollbar from displaying via CSS – but I am having difficulty identifying the container that is overflowing.
Does anyone know of a method or a trick to identify which div is displaying the scrollbar right now, or which div has overflowed the screen? I’ve been at this for a while and thinking, there’s got to be a DevTools trick for quickly finding this…
Advertisement
Answer
If this happens during an action I would ask myself which are the DOM elements that are loaded at this moment and I would probably try to add something like overflow: hidden; on the elements loaded at this moment to see which one Do it.
If there is javascript, breakpoints can be useful.
It is also possible to put some on the DOM (element inspector, right click on a div or other elements then “break on” and “subtree modification” for example)
I find the breakpoint very practical to go back to a problem.