使用 CSS 创建水平滚动部分

cssweb developmentfront end technology更新于 2024/12/19 11:24:17

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

它使用浏览器原生功能进行水平滚动，并支持跨设备响应。允许轻松导航和浏览内容。它不需要任何额外的库或插件。

算法

使用"container"类定义一个容器元素。
将容器的"overflow-x"属性设置为"auto"，以启用水平滚动。
将容器的"white-space"属性设置为"nowrap"，以防止部分换行到下一行。
使用"section"类定义部分元素。
将每个部分的"display"属性设置为"inline-block"，使它们并排显示。
将每个部分的"width"属性设置为"100vw"，以将每个部分的宽度设置为完整视口宽度。
设置每个部分的"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; /* 启用容器的水平滚动 */
        white-space: nowrap; /* 防止部分换行到下一行 */
    }
    
    .section {
        display: inline-block; /* 使部分并排显示 */
        width: 100vw; /* 将每个部分的宽度设置为整个视口宽度 */
        height: 80vh; /* 将每个部分的高度设置为视口高度的 80% */
        margin-right: 20px; /* 在每个部分的右侧添加 20px 的边距 */
        Vertical-align: top; /* 将每个部分的顶部与容器顶部对齐 */
    }


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

也可以使用传统的垂直滚动条，结合分页或标签页将内容分隔成多个部分来实现。使用网格或弹性框布局，以响应式且视觉上更具吸引力的方式显示内容，而无需依赖水平滚动。