- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Make a div horizontally scrollable using CSS
In CSS, we can make a div horizontally scrollable by setting up the proper value of the ‘over-flow’ property.
First, let’s understand why we need to make a div horizontally scrollable. For example, the width of the parent div element is 500px, or the screen size is 500px. Now, the content of the div element is 1500px. So, if we don’t make the parent div horizontally scrollable, it breaks the UI of the application. So, we can make it scrollable, and users can scroll to see the invisible content.
Syntax
Users can follow the syntax below to make a div horizontally scrollable.
.scroll {
width:<Width_of_div_element>;
overflow: scroll;
}
In the above syntax, we have used the ‘width’ and ‘overflow’ properties to make a div horizontally scrollable. If we don’t specify the element's width, the ‘overflow’ property isn’t affected.
Example 1
In the example below, we have created the HTML div and added some text content. In CSS, we have given the ‘500px’ fixed width to the div element. Also, we have set the ‘scroll’ as a value of the overflow property.
In the output, users can observe that a horizontal scroll bar appears in the div element as the text width is more than the width of the div with the class name ‘scroll’.
<html>
<head>
<style>
.scroll {
margin: 5px;
padding: 5px;
border: 2px solid blue;
width: 500px;
overflow: scroll;
white-space: nowrap;
height: 50px;
}
</style>
</head>
<body>
<h3>Using the <i> overflow-x: scroll </i> to make a div horizontally scrollable using CSS</h3>
<div class = "scroll">
The United States of America (USA) has the largest GDP in the world. In 2020, the nominal GDP of the United
States was $21.43 trillion. China is the second-largest economy in the world, with a nominal GDP of $14.34
trillion in 2020. Other countries with large GDPs include Japan, Germany, and the United Kingdom.
</div>
</body>
</html>
Example 2
In the example below, we have used the ‘overflow: auto’ CSS property to make a div horizontally scrollable. Also, we have given the fixed width to the div element. The main difference between the ‘auto’ and ‘scroll’ values is when we use ‘scroll’, the div always remains scrollable, and when we use ‘auto’, the div element becomes scrollable when overflow occurs.
<html>
<head>
<style>
.scroll {
border: 2px solid green;
width: 500px;
overflow: auto;
white-space: nowrap;
height: 50;
}
</style>
</head>
<body>
<h3>Using the <i> overflow: auto </i> to make a div horizontally scrollable using CSS</h3>
<div class = "scroll">
This is a sample text to put in the HTML div element. You can scroll this div horizontally.
</div>
</body>
</html>
Example 3
In the example below, we have used the ‘overflow-x: auto’ CSS property to make a div horizontally scrollable. We have added the single child div inside the parent div.
In the output, users can observe that as we have used the ‘auto’ value, initially outer div is not scrollable. When we click on the ‘Add div’ button, it adds child divs to the parent div using JavaScript, and when you add 5 to 7 child divs, it automatically becomes scrollable.
<html>
<head>
<style>
.scroll { border: 2px solid green; width: 500px; overflow-x: auto; white-space: nowrap; display: flex; flex-direction: row; }
.inner { max-width: 250px; height: 100px; background-color: red; border: 2px dotted blue; margin: 3px; }
</style>
</head>
<body>
<h3>Using the <i> overflow-x: auto </i> to make a div horizontally scrollable using CSS</h3>
<div class = "scroll">
<div class = "inner">
Inner Div
</div>
</div>
<button onclick = "addDiv()"> Add div </button>
</body>
<script>
function addDiv() {
// add the div element to the scroll div
let scroll = document.querySelector('.scroll');
let new_div = document.createElement('div');
new_div.classList.add('inner');
new_div.innerHTML = 'Inner Div';
scroll.appendChild(new_div);
}
</script>
</html>
Example 4
In the example below, we have designed the scrollbar using CSS. First, we have made the div horizontally scrollable to show the scroll bar. After that, we set the background colour to the scrollbar. Furthermore, we have designed the scrollbar track and thumb.
In the output, users can observe the good-looking scrollbar and design according to the requirements.
<html>
<head>
<style>
.scroll {
width: 500px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
border: 1px solid red;
scrollbar-width: thin;
scrollbar-color: grey;
}
/* styling the scroll bar */
.scroll::-webkit-scrollbar { width: 10px; height: 10px }
.scroll::-webkit-scrollbar-track { background: darkgray;}
.scroll::-webkit-scrollbar-thumb { background: grey; border-radius: 10px; }
</style>
</head>
<body>
<h3>Using the <i> overflow-x: auto </i> to make a div horizontally scrollable using CSS</h3>
<div class = "scroll">
This div is horizontally scrollable. How are you? Do you like CSS? Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects.
</div>
</body>
</html>
Users learned to make a div horizontally scrollable using the ‘overflow’ property of CSS. In the first example, we have used the ‘overflow: scroll’ CSS property. In the second example, we have used the ‘overflow: auto’ CSS property. In the third example, we used the ‘overflow-x: auto’ CSS property; in the final example, we designed the scroll bar using CSS.
2K+ Views
