Horizontal Scroll Using CSS
CSS is all about presentation. Discover how Horizontal Scroll Using CSS works to transform plain HTML into a premium user experience in the guide below.
The horizontal scroll using CSS is required for the short-width container. If long-size data displays on a small container, then use the scroll to get all content without hustle. We can use vertical or horizontal scrolling using CSS, but here, we see the horizontal scrollbar using CSS. The horizontal scroll slides from the left to the right bar to display content. We can add the horizontal scroll for tables, div tags, images with content, etc. There are two types of methods to get the horizontal scroll in the CSS.
- Use CSS overflow-x: auto with or without overflow-y: hidden
- By using overflow: auto; property
- Use CSS overflow: scroll property
Use CSS overflow-x: auto with or without overflow-y:hidden
The horizontal scrolling necessitated the implementation of an overflow technique involving both the x and y axes for scroll bar adjustment. Utilize the overflow-x attribute with the value set to auto, while employing the hidden value for the overflow-y axis.
Syntax
The given syntax demonstrates the implementation of the overflow-x and overflow-y attributes along with their respective values.
div.mains {
padding: 14px;
width: 300px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
Examples
The upcoming instances demonstrate horizontal scrolling by utilizing overflow properties within CSS.
Example 1:
The demonstration illustrates a simple horizontal scroll achieved through CSS attributes.
<!DOCTYPE html>
<html>
<head>
<title> Horizontal scroll using css </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
div.mains {
margin: 5px, 5px;
padding: 14px;
background-color: aqua;
width: 300px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<h3 class = "class1">
Horizontal scroll using css
</h3>
<div class = "mains">
The horizontal scroll using CSS is required for the short-width container. If long-size data displays on a small container, then use the scroll to get all content without hustle. We can use vertical or horizontal scrolling using CSS, but here, we see the horizontal scrollbar using CSS. The horizontal scroll slides from the left to the right bar to display content.
</div>
<b>
We can add the horizontal scroll for tables, div tags, images with content, etc.
</b>
</body>
</html>
Output:
The output shows the Horizontal scroll using css.
Example 2:
The illustration demonstrates a horizontal scroll feature implemented through CSS attributes. It is achievable by defining the height and solely utilizing the overflow-x properties.
<!DOCTYPE html>
<html>
<head>
<title> Horizontal scroll using css </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
div.mains {
margin: 5px, 5px;
padding: 14px;
background-color: aqua;
width: 300px;
height: 50px;
overflow-x: auto;
white-space: nowrap;
}
</style>
</head>
<body>
<h3 class = "class1">
Horizontal scroll using css without overflow-y property
</h3>
<div class = "mains">
The horizontal scroll using CSS is required for the short-width container. If long-size data displays on a small container, then use the scroll to get all content without hustle. We can use vertical or horizontal scrolling using CSS, but here, we see the horizontal scrollbar using CSS. The horizontal scroll slides from the left to the right bar to display content.
</div>
<b>
We can add the horizontal scroll for tables, div tags, images with content, etc.
</b>
</body>
</html>
Output:
The output shows the Horizontal scroll using css.
Using the CSS "overflow: auto;" Property
CSS employs numerous attributes to generate scrolling and presentation on the webpage. The overflow property utilizes the auto value in conjunction with the width of the container.
Syntax
The code snippet below demonstrates the utilization of the overflow auto attribute to enable horizontal scrolling.
div.mains {
padding: 14px;
width: 300px;
overflow: auto;
white-space: nowrap;
}
Examples
The examples below demonstrate horizontal scrolling by utilizing the CSS properties overflow: auto.
Example 1:
The demonstration illustrates a simple horizontal scroll implemented through CSS attributes. This straightforward horizontal scroll operates in a left-to-right manner. It is unnecessary to exceed the axis limits to achieve the horizontal scroll effect.
<!DOCTYPE html>
<html>
<head>
<title> Horizontal scroll using css </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
div.mains {
margin: 5px, 5px;
padding: 14px;
background-color: orange;
width: 300px;
height: 50px;
overflow: auto;
white-space: nowrap;
}
</style>
</head>
<body>
<h3 class = "class1">
Horizontal scroll using css with auto overflow property
</h3>
<div class = "mains">
The horizontal scroll using CSS is required for the short-width container. If long-size data displays on a small container, then use the scroll to get all content without hustle. We can use vertical or horizontal scrolling using CSS, but here, we see the horizontal scrollbar using CSS. The horizontal scroll slides from the left to the right bar to display content.
</div>
<b>
We can add the horizontal scroll for tables, div tags, images with content, etc.
</b>
</body>
</html>
Output:
The output shows the Horizontal scroll using css.
Example 2:
The sample demonstrates basic horizontal scrolling using CSS attributes. In this case, the scrollbar moves in a leftward direction.
<!DOCTYPE html>
<html>
<head>
<title> Horizontal scroll using css </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains {
margin: 5px, 5px;
padding: 14px;
background-color: green;
color: white;
width: 300px;
height: 50px;
overflow: auto;
direction:rtl;
white-space: nowrap;
}
</style>
</head>
<body>
<h3 class = "class1">
Horizontal scroll using css with right-to-left overflow
</h3>
<div class = "mains">
The horizontal scroll using CSS is required for the short-width container. If long-size data displays on a small container, then use the scroll to get all content without hustle. We can use vertical or horizontal scrolling using CSS, but here, we see the horizontal scrollbar using CSS. The horizontal scroll slides from the left to the right bar to display content.
</div>
<b>
We can add the horizontal scroll for tables, div tags, images with content, etc.
</b>
</body>
</html>
Output:
The output shows the Horizontal scroll using css.
Using the CSS "overflow-x: scroll" Property
The CSS employs the overflow-x attribute with the scroll keyword to exhibit the scrollbar on the webpage. To meet the container's needs, we may opt for the overflow-y property set to hidden; if not, we can utilize the overflow-x property.
Syntax
The code below demonstrates the overflow scroll attribute for horizontal scrolling.
div.mains {
padding: 14px;
width: 300px;
overflow-x: scroll;
white-space: nowrap;
}
Examples
The subsequent instances demonstrate horizontal scrolling by utilizing the overflow: scroll attributes in CSS.
Example 1:
The demonstration showcases a simple horizontal scroll effect achieved through CSS attributes. This feature functions similarly to a standard overflow setting, specifically controlling the horizontal axis on the webpage.
<!DOCTYPE html>
<html>
<head>
<title> Horizontal scroll using CSS </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains {
margin: 5px, 5px;
padding: 14px;
background-color: green;
color: white;
width: 300px;
height: 50px;
overflow-x: scroll;
white-space: nowrap;
}
</style>
</head>
<body>
<h3 class = "class1">
Horizontal scroll using css with overflow-x: scroll property
</h3>
<div class = "mains">
The horizontal scroll using CSS is required for the short-width container. If long-size data displays on a small container, then use the scroll to get all content without hustle. We can use vertical or horizontal scrolling using CSS, but here, we see the horizontal scrollbar using CSS. The horizontal scroll slides from the left to the right bar to display content.
</div>
<b>
We can add the horizontal scroll for tables, div tags, images with content, etc.
</b>
</body>
</html>
Output:
The output shows the Horizontal scroll using css.
Example 2:
The demonstration illustrates a simple horizontal scrolling effect achieved through CSS attributes. A horizontal scrollbar is applied to the body element, appearing based on the length and width of the viewport. This feature enables a responsive horizontal scrolling experience for the displayed content.
<!DOCTYPE html>
<html>
<head>
<title> Horizontal scroll using css </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
body {
margin: 5px, 5px;
padding: 14px;
background-color: green;
color: white;
width: 300px;
height: 150px;
overflow-x: scroll;
white-space: nowrap;
}
</style>
</head>
<body>
<div class = "mains">
<h3 class = "class1">
Horizontal scroll using css with overflow-x: scroll property
</h3>
The horizontal scroll using CSS is required for the short-width container.
<br>
If long-size data displays on a small container, then use the scroll to get all content without hustle. <br>
We can use vertical or horizontal scroll using CSS, but here, we see the horizontal scrollbar using CSS. <br>
The horizontal scroll slides from the left to the right bar to display content.
</div>
<b>
We can add the horizontal scroll for tables, div tags, images with content, etc.
</b>
</body>
</html>
Output:
The output shows the Horizontal scroll using css.
Disable the Horizontal Scroll using CSS
Disabling horizontal scrolling can be achieved by setting the CSS property with a specific value. To prevent horizontal scrolling, the overflow-x property within the style tag can be assigned a value of hidden.
Syntax
The syntax below is employed to disable horizontal scrolling in CSS.
div.mains {
overflow-x: hidden;
}
Example
The disabled horizontal scroll is demonstrated in the following example.
<!DOCTYPE html>
<html>
<head>
<title> Horizontal scroll using css </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
div.mains {
margin: 5px, 5px;
padding: 14px;
background-color: aqua;
width: 300px;
overflow-x: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<h3 class = "class1">
Horizontal scroll using css
</h3>
<div class = "mains">
The horizontal scroll using CSS is required for the short-width container. If long-size data displays on a small container, then use the scroll to get all content without hustle.
</div>
<b>
We can turn off the horizontal scroll for the container.
</b>
</body>
</html>
Output:
The result displays the container with a deactivated horizontal scroll bar.
Conclusion
The CSS horizontal scroll presents oversized content within a container with a specified minimum width. This feature assists both users and developers in managing the appearance of the web application.
