使用HTML和CSS创建水平滚动吸附效果|极客教程

使用HTML和CSS创建水平滚动吸附效果

参考： Create Horizontal Scroll Snap Using HTML and CSS

在现代网页设计中，水平滚动吸附效果是一种流行的设计趋势，它可以为用户提供平滑的滚动体验，并在滚动过程中自动将滚动位置吸附到特定的元素上。这种效果特别适用于图像画廊、产品展示、时间轴等场景。本文将详细介绍如何使用HTML和CSS来实现这一效果，并提供多个示例代码供读者参考。

基础概念

在深入示例之前，让我们先了解一些基础概念。

CSS Scroll Snap

CSS Scroll Snap是一种CSS属性，它允许开发者在滚动容器中创建具有吸附效果的滚动体验。通过使用这些属性，可以指定滚动容器的子元素在用户滚动时如何吸附到滚动容器的特定位置。

主要相关的CSS属性包括：

scroll-snap-type: 定义滚动容器的吸附行为。
scroll-snap-align: 定义子元素如何对齐到滚动容器的吸附点上。
scroll-snap-stop: 定义滚动时是否“停靠”在吸附点上。

HTML结构

实现水平滚动吸附效果的基本HTML结构通常包括一个外部容器（滚动容器）和多个内部元素（吸附元素）。外部容器负责定义滚动区域，而内部元素则是用户滚动时将要吸附的目标。

示例代码

下面是一系列示例代码，展示了如何使用HTML和CSS创建水平滚动吸附效果。

示例1：基础水平滚动吸附

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例1</title>
<style>
  .scroll-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .item {
    flex: 0 0 auto;
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
  }
</style>
</head>
<body>

<div class="scroll-container">
  <div class="item" style="background-color: lightcoral;">Visit how2html.com</div>
  <div class="item" style="background-color: lightblue;">Learn how2html.com</div>
  <div class="item" style="background-color: lightgreen;">Master how2html.com</div>
</div>

</body>
</html>

Output:

使用HTML和CSS创建水平滚动吸附效果

示例2：改变吸附对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例2</title>
<style>
  .scroll-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .item {
    flex: 0 0 auto;
    width: 80vw;
    height: 100vh;
    scroll-snap-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    margin: 0 10vw;
  }
</style>
</head>
<body>

<div class="scroll-container">
  <div class="item" style="background-color: lightcoral;">Explore how2html.com</div>
  <div class="item" style="background-color: lightblue;">Discover how2html.com</div>
  <div class="item" style="background-color: lightgreen;">Innovate how2html.com</div>
</div>

</body>
</html>

Output:

使用HTML和CSS创建水平滚动吸附效果

示例3：使用`scroll-snap-stop`

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例3</title>
<style>
  .scroll-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .item {
    flex: 0 0 auto;
    width: 90vw;
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    margin: 0 5vw;
  }
</style>
</head>
<body>

<div class="scroll-container">
  <div class="item" style="background-color: lightcoral;">Engage how2html.com</div>
  <div class="item" style="background-color: lightblue;">Connect how2html.com</div>
  <div class="item" style="background-color: lightgreen;">Inspire how2html.com</div>
</div>

</body>
</html>

Output:

使用HTML和CSS创建水平滚动吸附效果

示例4：垂直滚动吸附

虽然本文主题是水平滚动吸附，但为了完整性，我们也提供一个垂直滚动吸附的示例。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例4</title>
<style>
  .scroll-container {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    height: 100vh;
  }
  .item {
    flex: 0 0 auto;
    height: 100vh;
    scroll-snap-align: start;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
  }
</style>
</head>
<body>

<div class="scroll-container">
  <div class="item" style="background-color: lightcoral;">Vertical how2html.com</div>
  <div class="item" style="background-color: lightblue;">Scroll how2html.com</div>
  <div class="item" style="background-color: lightgreen;">Snap how2html.com</div>
</div>

</body>
</html>