横向滚动

不过，让我分享一个小秘密——它不是左右滚动。它实际上是垂直滚动，伴随着向下滚动时可视区域内元素移动的交互。

在本教程中，您将通过执行以下步骤掌握如何产生水平滚动效果：

1. 建立“轨道”部分
2. 安排“相机”块
3. 构建“框架”块
4. 融入元素
5. 调整行为
6. 针对移动设备进行优化

建立“轨道”部分

通过引入 部分 包含所有内部元素的组件：

1. 采摘 部分 组件来自 添加面板 到页面上（ 部分 默认设置为100%宽度）
2. 访问 选择器场地 在 样式面板
3. 为 部分 通过我们的 选择器场地 （例如“Track”，但我们可以自由选择任何名称）

例如，在我们的演示中，我们打算水平穿过 4 个物体。物品的体积起着至关重要的作用，因为它决定了“轨道”的高度 部分.

调整“轨道”部分的高度

让我们定义一个高度 部分:

1. 揭开 样式面板 > 尺寸
2. 指定 高度 400vw

注意：使用 VW（视口宽度）是因为我们要水平滚动 4 个项目。每个项目的高度对应 100vw（例如，4 个项目相当于 400vw）。

安排“相机”块

现在让我们集成一个元素，作为我们观察滚动项目的视口：

1. 放置 块元素 来自 添加控制板 进入“赛道” 部分
2. 输入 选择器场地 在 样式面板 
3. 将类名附加到 块元素 （例如“相机”，但我们保留选择任何名称的灵活性）

内部提示：我们可以加快访问 选择器场地 通过使用快捷键来选择元素，即 Command + Enter （在 Mac 上）或 Control + Enter （在 Windows 上）。

设计“相机”

相机” 堵塞 作为一个窗口，滚动项目将通过该窗口显示。一旦您选择“相机” 堵塞，确保其尺寸与视口精确匹配，并使其固定到其父组件：

1. 访问 样式面板 > 尺寸
2. 建立 宽度 为 100vw （相当于视口宽度的 100%）
3. 定义 高度 为 100vh （相当于视口高度的 100%）
4. 向下滚动到 位置 设置中的 样式面板
5. 改变位置 静止的 到 黏
6. 集成一个 0 像素的顶部位置（“轨道”顶部与 部分 以及“相机”的顶部 堵塞)

通过将元素设置为粘性，我们会自动将父元素定义为其子元素将粘附的容器。

构建“框架”块

让我们建立我们的“框架” 堵塞 水平对齐项目：

1. 插入 块元素 来自 添加控制板 进入“相机” 堵塞
2. 访问 选择器 字段内的 样式面板 
3. 命名 块元素 （例如“框架”，但我们可以自由选择任何名称）

插入项目

我们将首先生成一个包含我们插图的元素：

1. 揭开 包含面板 并选择一个 节块
2. 放下 节块 在“容器”内 分区块 在里面 航海家
3. 点击 选择器 框中的 设计面板
4. 为 节块 （例如，“Artifact”，但你可以使用任何你喜欢的标题）
5. 扩张 设计面板 > 弹性项目 并建立 尺寸 作为 不要缩小或扩大
6. 使用权 设计面板 > 程度 并分配一个 宽度 100% 和 高度 共 100%

您还可以选择在所有边缘添加缓冲，为物品提供一些呼吸空间（例如，每边 40 像素的缓冲）。要执行此操作，请启动 设计面板 > 间距 并修复填充。

目前，我们可以在“Artifact”中嵌入图像 节块 我们刚刚成立。

自定义项目中的视觉效果

在本例中，我们采用了占据“神器”整个宽度和高度的插图节块. 

我们还应该在图像的所有边缘添加一些填充，为图像提供一些呼吸空间： 

1. 发射 设计面板 > 程度
2. 分配 宽度 为 100%
3. 设置 高度 为 100%
4. 调整 合身 到 包罗万象

为我们的物品设置“取景器”

如果我们使用鼠标或触控板左右滚动（在 Windows 上滚动时按下 SHIFT），我们可以预览“取景器”概览中显示的所有项目。

然而，项目从“取景器”视角溢出，这不是预期的结果。我们的目标是在交互中包含项目后仅在该视图中看到它们。为了防止图像溢出： 

1. 选择“取景器” 分区块 （或者您可能已经指定）
2. 扩张 设计面板 > 程度
3. 配置 溢出 作为 隐 

通过将“取景器”溢出设置为隐藏，任何向左和向右滚动的尝试都将受到阻碍。这使我们能够调整交互，将“容器”从右移到左。

调整动作

在我们的场景中，我们的组件包括“轨道” 部分 > “取景器” 分区块 >“容器” 分区块 > “神器” 分区块 > 插图元素。

我们互动的目的是让“追踪” 分区块 引发互动，改变“框架” 区块分部 从右到左。

建立触发器

选择“曲目” 部分 并打开 交互面板:

1. 点击加号 元素触发器
2. 选择 在视图内滚动时
3. 按下下拉菜单 行动
4. 选择 播放滚动动画
5. 点击加号 滚动动画 开始新的动画
6. 命名新动画（例如“水平滚动动画”）

用交互取代“框架”

现在我们已经指定了“轨道” 部分 作为触发因素，我们必须挑选出“框架” 区块分部 在里面 航海家. 选择“框架” 区块分部 在创建交互的过程中，我们可以将动画合并到“框架”中 区块分部.

返回 交互面板，让我们在“框架”上设计我们的互动 区块分部 当轨道 部分 映入眼帘的是：

1. 点击加号
2. 选择 转移
3. 将 x 轴上的偏移从 0% 固定到 0vw（因为这是我们交互的起点）

最后一步是调整 x 轴上的偏移，从 100% 到 -300vw。

我们如何获得 -300vw？ 赛道 部分 是 400vw，但我们在滚动时仅看到视口的完整宽度（100vw）。

要将所有 4 个项目向左滑动，我们必须将 x 轴上的偏移从 100% 设置为 -300vw，以将框架向左移动 400vw。400vw 还考虑了我们在开始滚动之前观察到的初始 100vw。

调整交互的偏移量

点击设计器中的眼睛图标即可实时预览您的网站。在测试我们的新交互时，我们发现交互的开始太早，并且会推进到后续 部分 太快了。

我们可以通过两种方法来微调交互：

• 将动画的开始时间修改为 20%
• 改变我们的动画，使其在“轨道” 部分 完全可见

将动画的开始时间修改为 20%：

1. 展开 交互面板 >“水平滚动动画”交互
2. 按 转移 从 0% 开始的操作
3. 调整关键帧为20%

调整动画以在“轨道” 部分 完全可见：

1. 展开 交互面板 > 动画边界
2. 挑选 完全可见

在预览我们的实时项目时，我们观察到交互在初始项目完全可见时开始，但提前结束。交互到达“轨道”的终点 部分 我们的互动仍在进行中。

个性化互动的结论

重新审视 交互面板， 和 动画边界.我们将动画的结束部分调整到15%左右。

预览项目后，我们可以滚动到“轨道” 部分 我们的交互将我们的项目水平滚动，直到到达第四个也是最后一个项目。

针对移动设备进行调整

在配置水平滚动动画时，要记住的一个因素是平板电脑和移动用户的可用性。如果移动设备上的用户尝试左右移动，水平滚动交互将无法按预期运行，因为它仅在用户垂直滚动时才起作用。因此，它无法为移动用户提供非常友好的体验。

要将我们的交互配置为仅供桌面用户使用：

1. 选择“曲目” 部分
2. 访问 互动面板
3. 点击名为 在视图内滚动 我们之前设置的（例如“水平滚动动画”）
4. 取消选中我们不希望启用此交互的移动设备（例如平板电脑、手机横向和手机纵向断点）

现在，由于移动设备上禁用了交互，我们必须优化布局以适应平板电脑和小屏幕上的垂直滚动：

移动“跟踪”部分

1. 选择 药片 断点
2. 选择“曲目” 部分 在设计板上
3. 访问 造型部分 > 方面
4. 修改 高度 从 400vw 到自动（允许它根据内部内容自动调整高度）

移动“相机”模块

1. 选择“相机” 堵塞
2. 访问 样式面板 > 方面
3. 将宽度和高度都设置为自动（让内容填满可用空间）
4. 保持 溢出 在 默认 可见设置（在较小的屏幕上显示所有内容）

移动“框架”模块

1. 选择“框架” 堵塞
2. 使用权 布局设置 > 弹性盒子
3. 更改 弹性盒子 方向 水平的 到 垂直的

随后，调整“项目”的样式属性 堵塞 以适应所需的垂直滚动设计。

请注意：在平板电脑断点处所做的更改不会影响桌面视图，但会反映在移动设备横向和纵向断点上。

就这样！Webflow 中的水平滚动已成功设置。