CSS 创建水平可滚动的章节

水平可滚动的章节是一种常见的网页设计模式，用于展示超出视口宽度的内容。这种设计模式允许用户水平滚动，提供了一种独特和引人入胜的方式来显示大图像、图库、时间轴、地图和其他内容。可以使用CSS属性如overflow-x: auto或overflow-x: scroll来实现。

这使用浏览器的原生功能来实现水平滚动，对各种设备都具有响应性。它可以方便地浏览和探索内容，不需要任何额外的库或插件。

步骤

使用class属性”container”来定义一个容器元素。
将容器的overflow-x属性设置为”auto”以启用水平滚动。
将容器的white-space属性设置为”nowrap”以防止章节换行到下一行。
使用class属性”section”来定义章节元素。
将每个章节的display属性设置为”inline-block”，使其并排显示。
将每个章节的width属性设置为”100vw”，将每个章节的宽度设置为视口宽度的100%。
将每个章节的height属性设置为”80vh”，将每个章节的高度设置为视口高度的80%。
使用margin-right属性在每个章节右侧添加间距。
使用vertical-align属性使每个章节的顶部与容器的顶部对齐。
将章节元素放置在容器元素内部。

示例

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

这也可以使用传统的垂直滚动来实现，通过分页或选项卡将内容分成不同的部分。可以使用网格或弹性盒子布局来以响应式和视觉吸引人的方式显示内容，而不依赖水平滚动。