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>
<!-- Main container with class content -->
<div class="content">
<!-- Four sections for our code -->
<div class="section" id="one">
<!-- Heading tag -->
<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
/* 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;
} |
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>
<!-- Main container with class content -->
<div class="content">
<!-- Four sections for our code -->
<div class="section" id="one">
<!-- Heading tag -->
<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: