[HTML] Creating a horizontally scrolling element｜Introducing a method that was considered a taboo!

If you write a long sentence in HTML, it will grow “vertically” if you do not set anything.
Along with that, most mouse wheels scroll up and down, and mice with mouse wheels that support horizontal scrolling are rare.
For this reason, there was a trend that “horizontal scrolling” was forbidden, especially when using a PC.

However, with the spread of touch terminals such as smartphones, this common sense is crumbling.
Especially for smart devices, it is important to skillfully use horizontal scrolling according to the content.

In this article, I will introduce how to achieve horizontal scrolling in HTML.

Create horizontal scroll element in HTML

To achieve horizontal scrolling in HTML, use the CSS property “overflow-x” .
Here is a simple sample using overflow-x.

CSS

div {
  width: 300px;

  white-space: nowrap;
  overflow-x: scroll;
  border: solid 1px #696969;
}

HTML

<div>
   <p>
   </p>
</div>

The key points are the following three points.

・Specify the width of the parent element (“div” element here)
・Specify “overflow-x: scroll;”

By pressing this point, you can create a horizontally scrolling element.
In addition, by using “white-space: nowrap;” in this sample, the text will not be broken and the text will overflow.

Contents that can be specified for “overflow-x”

The “overflow-x” property sets how content is displayed when it overflows the element.
I will introduce what kind of display methods are available.

Let’s check the code to see how each behaves.

CSS

div {
  width: 300px;
  border: solid 1px #696969;
}
p {
  width: 1200px;
}

.visible {
  overflow-x: visible;
}

.hidden {
  overflow-x: hidden;
}

.scroll {
  overflow-x: scroll;
}
.auto {
  overflow-x: auto;
}

HTML

<p>overflow-x: visible</p>
<div class="visible">
   <p>
   </p>
</div>
<p>overflow-x: hidden</p>
<div class="hidden">
   <p>
   </p>
</div>
<p>overflow-x: scroll</p>
<div class="scroll">
   <p>
   </p>
</div>
<p>overflow-x: auto</p>
<div class="auto">
   <p>
   </p>
</div>

In this example, “scroll” and “auto” have the same behavior, but “scroll” displays the scroll bar even if the content does not protrude from the element, and “auto” does not.

summary

I showed you how to create a horizontal scrolling element in HTML.

Depending on the content to be displayed, horizontal scrolling may be more effective.
You can create easy-to-read pages by using them properly as needed, so please try them out.