Ughck, accidental horizontal scrollbar, amiright?

That can be a pain, but you can usually find the offending element by surfing around the ol’ DevTools and selecting elements until you find something that extends too far over to to the right (off-page to the left doesn’t tend to trigger a scrollbar the same way) and adjusting it.

Sometimes I use the “Delete Node” feature of DevTools to remove stuff from the page until the scrollbar goes away. Then I know which element caused it and can drill down from there. Here’s a super quick video of that kind of troubleshooting:

In some cases, there might be an element that is literally wider than the document is, which might cause horizontal overflow scrolling. You could use a little JavaScript to help you find the culprit.

var docWidth = document.documentElement.offsetWidth;

[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);

Which might find something like:

Another minor little trick that helps me sometimes is to scroll over so you can see offending overflow area, and then click and Inspect Element in that space to see if you can target the offending element.

Hidden Horizontal Overflow

Sometimes horizontal overflow is more elusive. Like when it doesn’t trigger a horizontal scrollbar, but you can still expose the overflow by swiping with a touchpad or select-and-dragging.

I’ve made a basic demo of that scenario, see this GIF:

What’s going on there is that there is an element that is positioned there, offscreen, with opacity: 0; so you can’t see it. Normally that would trigger horizontal overflow and a horizontal scrollbar, but we’re explicitly hiding it:

body {
  overflow-x: hidden;
}
.hidden-thing {
  position: absolute;
  left: 100%;
  width: 50px;
  height: 50px;
  opacity: 0;
}

In most scenarios, when an element is hidden outside of the bounds of an element with hidden overflow, it’s just kinda lost to the visual world. But with the document itself, you can still force a scroll over there. Weird but true. It’s likely even a bug, since if you do overflow: hidden; rather than overflow-x: hidden; – it stops it. It’s just more common and practical to use overflow-x.

Note this is an issue in desktop Blink or WebKit based browsers. Not an issue in Gecko or anything mobile that I’ve seen.

Having hidden offscreen elements isn’t particularly rare. I think it’s getting more and more common with, you know, animations! transitions! 3D fancy! material design! transitional interfaces! I ran into this issue designing the search form on CodePen that kinda slides out when you click a thing. Simplified, that would be like this:

The solution, in this case, is to hide the overflow on a parent element, rather than relying on the hidden overflow on the body.


Finding/Fixing Unintended Body Overflow is a post from CSS-Tricks

No Comments
Comments to: Finding/Fixing Unintended Body Overflow

Recent Articles

Good Reads

Worlwide

Overview VipsPM – Project Management Suite is a Powerful web-based Application. VipsPM is a perfect tool to fulfill all your project management needs like managing Projects, Tasks, Defects, Incidents, Timesheets, Meetings, Appointments, Files, Documents, Users, Clients, Departments, ToDos, Project Planning, Holidays and Reports. It has simple yet efficient layout will make managing projects easier than […]

Trending

Turquoise Jewelry is one of the ancient healing stones used for personal adornment and astrological benefits. The rare greenish blue-colored pectolite is celebrated for its enchanting powers among many crystal lovers. It is a hydrated phosphate of copper and aluminum that ranks 5 to 6 on the Mohs hardness scale. It is deemed a protective […]
24 March 2020, the evening when the Government of India ordered a nationwide lockdown for 21 days. Because the deadly Coronavirus crept into the world and turned it into a sinking ship, put unforeseen pressures on all of us with its destructive intentions. Soon after, it turned into a giant monster. Omicron, the new variant […]
Singapore is recognised globally as a prime destination for foreign investors. Its business structure is well-developed, and its tax system is favourable to business owners. The government has a strong support system for entrepreneurs and provides legal protection for intellectual property rights. All of these conditions create an environment that is ideal for Singapore company […]