使用 HTML 和 CSS 创建水平滚动捕捉

htmlcssweb developmentfront end technology更新于 2024/12/19 10:52:17

要创建水平滚动捕捉，我们将使用 scroll-snap-type 来产生捕捉效果。属性 scroll-snap-type 和 scroll-snap-align 分别指定了我们要采用的捕捉行为类型和捕捉点的对齐方式。

scroll-snap-type 属性的值为"x essential"，表示我们希望水平捕捉;scroll-snap-align 属性的值为"start"，表示我们希望捕捉标记与每个部分的开头对齐。

这可以使用 JavaScript 库(例如 ScrollSnap)来实现，这些库提供了更高级的功能和自定义功能。

另一种选择是使用 CSS 框架(例如 Bootstrap)提供用于水平滚动捕捉的内置组件，并使用 CSS 网格或弹性框布局来创建自动相互捕捉的水平部分。

算法

定义一个容器元素来容纳可以水平滚动的部分
将容器的宽度设置为其父元素的宽度和高度设置为视口高度的 100%
使用 CSS overflow-x 属性，在内容溢出容器时启用水平滚动
使用 CSS scroll-snap-type 属性，启用强制水平滚动捕捉
为每个将水平滚动的部分定义一个 section 类
将每个部分的宽度设置为其父元素宽度的 100%，高度设置为视口高度的 100%
使用 CSS display 属性，将每个部分显示为内联块元素，以便水平放置
使用 CSS scroll-snap-align 属性，将每个部分的捕捉对齐设置为容器的起始位置

示例

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Horizontal Scroll Snap</title>

    <!---------------------- CSS ---------------------------->
    <style>

      /* 将容器元素的宽度设置为其父元素宽度的 100%，高度设置为视口高度的 100% */
        .container {
          width: 100%;
          height: 100vh;
          /* 当内容溢出容器时启用水平滚动 */
          overflow-x: scroll;
          /* 启用强制水平滚动捕捉 */
          scroll-snap-type: x mandatory;
        }

        /* 将每个部分的宽度设置为其父元素宽度的 100%，高度设置为视口高度的 100% */
        .section {
          width: 100%;
          height: 100vh;
          /* 将每个部分显示为内联块元素以允许水平放置 */
          display: inline-block;
          /* 将每个部分的对齐方式设置为与容器的开始对齐 */
          scroll-snap-align: start;
        }

    </style>

  </head>
  <body>
    <!-- The container element will contain the sections that can be scrolled horizontally -->
    <div class="container">
      <!-- Each section is wrapped inside an <h1> tag -->
      <h1><div class="section">Section 1</div></h1>
      <h1><div class="section">Section 2</div></h1>
      <h1><div class="section">Section 3</div></h1>
      <h1><div class="section">Section 4</div></h1>
    </div>
    
  </body>
  </html>

创建此组件时，务必确保其与不同浏览器和设备的兼容性。应使用 CSS 属性(例如 scroll-snap-type、scroll-snap-align 和 scroll-behavior)来控制滚动捕捉行为。HTML 结构应设置一个容器元素和固定宽度的项目。应确定捕捉点，并使用 scroll-behavior 启用平滑滚动。应提供适当的 ARIA 属性和键盘导航选项。牢记这些注意事项和限制，开发者可以创建功能齐全且用户友好的水平滚动捕捉组件。