Home > Article > Web Front-end > Create horizontal scrollable sections in CSS

Create horizontal scrollable sections in CSS

WBOYforward: 2023-08-29 09:29:091034browse

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>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 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!

css auto class display overflow margin 算法

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Print two-sided documents using CSS settingsNext article：Print two-sided documents using CSS settings

See more

Create horizontal scrollable sections in CSS

algorithm

Example

in conclusion

Related articles