Horizontally scrollable sections are a common web design pattern used to display content that exceeds 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 achieved by using 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 require any additional libraries or plugins.
algorithm
Use the "container" class to define container elements.
Set the container's "overflow−x" property to "auto" to enable horizontal scrolling.
Set the container's "white−space" attribute to "nowrap" to prevent sections from wrapping to the next line.
Use class to define the section element for "section".
Set the "display" attribute of each section to "inline-block" so that they appear side by side.
Set the "width" property of each section 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" attribute.
Use the "vertical−align" attribute to align the top of each section with the top of the container.
Place the section element 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 id="Section">Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="section">
<h2 id="Section">Section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="section">
<h2 id="Section">Section 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="section">
<h2 id="Section">Section 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="section">
<h2 id="Section">Section 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</body>
</html>
This can also be achieved through traditional vertical scrolling with paging or tabs, dividing the content into different sections. Use a grid or flexbox layout to display content in a responsive and visually appealing way without relying on horizontal scrolling.
in conclusion
Keep the following guidelines in mind when designing:
Keep it simple: avoid filling every area with information. Focus on stating key points succinctly and clearly.
Use eye-catching visuals: To engage your audience and make your section more entertaining, use top-notch photos, videos, or animations.
Use a consistent design: To produce a seamless overall look and feel, make sure every area has a consistent design.
Provide navigation: Allow users to easily move between sections of a horizontally scrolling page. To make them move, you can add arrows, points, and navigation connections.
The above is the detailed content of Create horizontal scrollable sections in CSS. For more information, please follow other related articles on the PHP Chinese website!
The Lost CSS Tricks of Cohost.orgApr 25, 2025 am 09:51 AMIn this post, Blackle Mori shows you a few of the hacks found while trying to push the limits of Cohost’s HTML support. Use these if you dare, lest you too get labelled a CSS criminal.
Next Level CSS Styling for CursorsApr 23, 2025 am 11:04 AMCustom cursors with CSS are great, but we can take things to the next level with JavaScript. Using JavaScript, we can transition between cursor states, place dynamic text within the cursor, apply complex animations, and apply filters.
Worlds Collide: Keyframe Collision Detection Using Style QueriesApr 23, 2025 am 10:42 AMInteractive CSS animations with elements ricocheting off each other seem more plausible in 2025. While it’s unnecessary to implement Pong in CSS, the increasing flexibility and power of CSS reinforce Lee's suspicion that one day it will be a
Using CSS backdrop-filter for UI EffectsApr 23, 2025 am 10:20 AMTips and tricks on utilizing the CSS backdrop-filter property to style user interfaces. You’ll learn how to layer backdrop filters among multiple elements, and integrate them with other CSS graphical effects to create elaborate designs.
SMIL on?Apr 23, 2025 am 09:57 AMWell, it turns out that SVG's built-in animation features were never deprecated as planned. Sure, CSS and JavaScript are more than capable of carrying the load, but it's good to know that SMIL is not dead in the water as previously
'Pretty' is in the eye of the beholderApr 23, 2025 am 09:40 AMYay, let's jump for text-wrap: pretty landing in Safari Technology Preview! But beware that it's different from how it works in Chromium browsers.
CSS-Tricks Chronicles XLIIIApr 23, 2025 am 09:35 AMThis CSS-Tricks update highlights significant progress in the Almanac, recent podcast appearances, a new CSS counters guide, and the addition of several new authors contributing valuable content.
Tailwind's @apply Feature is Better Than it SoundsApr 23, 2025 am 09:23 AMMost of the time, people showcase Tailwind's @apply feature with one of Tailwind's single-property utilities (which changes a single CSS declaration). When showcased this way, @apply doesn't sound promising at all. So obvio
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
Dreamweaver Mac version
Visual web development tools
