Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create Horizontal Scrollable Sections in CSS
A horizontal scrollable section is a popular web design pattern used to showcase content that extends beyond the width of the viewport. This design pattern allows users to scroll horizontally, providing a unique and engaging way to display large images, galleries, timelines, maps, and other content. This is implemented by using the CSS properties such as overflow?x: auto or overflow?x: scroll.
This uses native browser functionality for horizontal scrolling and is responsive across devices. Allows easy navigation and exploration of content. It does not need any additional libraries or plugins.
Algorithm
Define a container element with the class "container".
Set the container's "overflow?x" property to "auto" to enable horizontal scrolling.
Set the container's "white?space" property to "nowrap" to prevent the sections from wrapping to the next line.
Define the section elements with class "section".
Set each section's "display" property to "inline?block" to make them display side?by?side.
Set each section's "width" property to "100vw" to set the width of each section to the full viewport width.
Set each section's "height" property to "80vh" to set the height of each section to 80% of the viewport height.
Add a margin to the right of each section using the "margin?right" property.
Align the top of each section with the top of the container using the "vertical?align" property.
Place the section elements inside the container element.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Horizontal Scrollable Sections</title>
<!------------------------- CSS ----------------------->
<style>
.container {
overflow-x: auto; /* Enables horizontal scrolling for the container */
white-space: nowrap; /* Prevents the sections from wrapping to the next line */
}
.section {
display: inline-block; /* Makes the sections display side-by-side */
width: 100vw; /* Sets the width of each section to the full viewport width */
height: 80vh; /* Sets the height of each section to 80% of the viewport height */
margin-right: 20px; /* Adds a 20px margin to the right of each section */
vertical-align: top; /* Aligns the top of each section with the top of the container */
}
</style>
</head>
<body>
<!-- This is the container that holds the sections -->
<div class="container">
<!-- Each section is a div with the "section" class -->
<div class="section">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="section">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="section">
<h2>Section 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="section">
<h2>Section 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="section">
<h2>Section 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</body>
</html>
This can also be implemented using a traditional vertical scroll with pagination or tabs to separate content into sections. Using a grid or flexbox layout to display content in a responsive and visually appealing manner without relying on horizontal scrolling.
Conclusion
Remember the following guidelines while designing:
Keep it Simple: Avoid stuffing each area to the brim with information. Put your attention towards succinctly and clearly stating the key points.
Use Eye?Catching Visuals: To draw viewers in and make your sections more entertaining, use top?notch photos, videos, or animations.
Use a Consistent Design: To produce a seamless overall look and feel, make sure that each area has a consistent design.
Provide Navigation: Make it simple for users to move between the parts of your horizontal scrolling page. To make them move, you can include arrows, dots, and navigation connections.
892 Views
