How to create horizontal scrollable sections using CSS ?
Last Updated :
15 May, 2023
In this article, we will see how we can create a horizontal scrollable section using CSS. We are going to make different sections and make them horizontally scrollable using CSS. HTML code is used to create the basic structure of the sections and CSS code is used to set the style.
HTML Code: In this section, we will create a structure for our sections.
Steps:
- Create a div element with class content.
- Inside our content div create another four div with class section.
- Give four different ids to each div.
- In each div include a heading tag with the appropriate heading.
Example: Here we are implementing the above-explained approach.
HTML
<!DOCTYPE html>
<html lang="en">
<body>
<div class="content">
<div class="section" id="one">
<h1>Welcome To</h1>
</div>
<div class="section" id="two">
<h1>Geeks</h1>
</div>
<div class="section" id="three">
<h1>For</h1>
</div>
<div class="section" id="four">
<h1>Geeks</h1>
</div>
</div>
</body>
</html>
|
CSS: We will use CSS to give our section some structure.
CSS
#one {
background-color: #E6358B;
}
#two {
background-color: #22A2AF;
}
#three {
background-color: #7CEC9F;
}
#four {
background-color: #D8A928;
}
.content {
width: 100vw;
height: 80vh;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.section {
width: 100%;
height: 100%;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
}
::-webkit-scrollbar {
display: none;
}
|
Complete Code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Adding color to first section */
#one {
background-color: #E6358B;
}
/* Adding color to second section */
#two {
background-color: #22A2AF;
}
/* Adding color to third section */
#three {
background-color: #7CEC9F;
}
/* Adding color to fourth section */
#four {
background-color: #D8A928;
}
/* General styling to our main section */
.content {
width: 100vw;
height: 80vh;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
/* Styling to each individual section */
.section {
width: 100%;
height: 100%;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
}
/* For hiding scroll bar */
::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body>
<div class="content">
<div class="section" id="one">
<h1>Welcome To</h1>
</div>
<div class="section" id="two">
<h1>Geeks</h1>
</div>
<div class="section" id="three">
<h1>For</h1>
</div>
<div class="section" id="four">
<h1>Geeks</h1>
</div>
</div>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...