CSS trick for removing unwanted horizontal scroll bars

C

Have you ever noticed in your browser window that there’s an unintended horizontal scroll bar?

Or, maybe on your iPhone, that there’s an unexpected horizontal dark line that shows up when you touch the screen?

Well, that means your content is wider than the viewport, and there are easy ways to fix this.

Example of what the horizontal scroll bar looks like on iPhones; it's a slightly transparent black bar that appears when you touch your screen on a page that has extra width larger than the viewport.
Example of what the horizontal scroll bar looks like on iPhones; it’s a slightly transparent black bar that appears when you touch your screen on a page that has extra width larger than the viewport.

CSS code snippet that removes horizontal scroll bars on desktop and mobile

Please note that this CSS code snippet is applied to both the body and the HTML tag. Just the <body> or just the <html> will not hide the horizontal scroll bar on BOTH desktop and mobile views. Also, for newbies, note that these are HTML-level elements, so they do not have a period (for classes) or # (for ids) before them in the CSS.

body, html {
  overflow-x: hidden;
}

A bit of background: as defined by W3School, in your webpage’s structure, the <body> contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. and the <HTML> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).

How does this work?

This overflow-x:hidden CSS applied to body and HTML works by removing the ability for these two top-level elements to scroll horizontally, therefore hiding horizontal scroll for all elements on your webpage.

To also consider: viewport

I suggest also looking at your viewport metadata. In the HTML5 Boilerplate, the defaults for viewport are shown below.

<meta name="viewport" content="width=device-width, initial-scale=1">

The width=device-width aligns the width of the webpage with the device’s screen width, which varies. The initial-scale=1 or initial-scale=1.0 sets the zoom level on page load.

Usability

Keep in mind that users expect to scroll vertically on websites, but horizontal scrolling, in most cases, is not an expectation. Exceptions to this “rule” are experimental, artistic, playful websites, but for most content and e-commerce websites, you do not want users to scroll horizontally.

The best way to prevent horizontal scrolling is to create both a mobile and desktop view of your website. Creating styles for several view sizes of your website is known as responsive design and is absolutely expected in websites in 2021 and later!

If you’re already using responsive design, ensure that you do not inadvertently have large fixed-width images that might display larger than a mobile viewport. A responsive image class can help with that issue (CSS snippet shown below)!

.img-fluid {
    max-width: 100%;
    height: auto;
}

If you’re using responsive images and media queries for your CSS and still have elements triggering an unintended horizontal scroll, then trying declaring overflow-x:hidden on both your body and HTML class.

Tailwind Class for Scrolling

Tailwind CSS Overflow Classes
Tailwind CSS Overflow Classes

On another note, if you’re using Tailwind CSS, Layout Classes in Overflow address scrolling. You can apply the Tailwind CSS class .overflow-x-hidden to any element you choose.

.overflow-x-hidden	{
      overflow-x: hidden;
}

Happy Coding! I hope this easy fix has solved your horizontal scroll bar woes!

About the author

Kelly Barkhurst

Designer to Fullstack is my place to geek out and to share tech solutions from my day-to-day as a designer, programmer, and business owner (portfolio). I also write on Arts and Bricks, a parenting blog and decal shop that embraces my family’s love of Art and LEGO bricks!

Add comment

Recent Posts

Archives

Categories