超额：隐藏

有时，页面上的元素可能会超出视口，从而导致水平或横向滚动的意外结果，从而显示布局周围的额外空白空间。并非所有水平滚动都是不受欢迎的，但如果它与您的设计相冲突，我们将指导您如何使用 Excess 来防止它：隐藏、自适应设计和有意的交互设置。 

在本教程中，您将了解以下内容：

1. 超额发生的原因
2. 识别过量的方法
3. 解决过剩问题的策略

超额发生的原因

许多因素都可能导致设计中出现不受欢迎的水平滚动，但通常是由于以下两个原因之一引起的： 

• 设计布局包括一个元素，该元素的尺寸或位置应使其移出屏幕并超出视口。
• 在屏幕外开始的活动或动画。例如，如果您有一个从侧面进入的标题，则页面加载时其在屏幕外的初始位置可能会导致溢出，尽管动画完成后标题最终会到达正确的位置。 

过多的水平滚动可能由与上述两种情况不同的情况引起，但布局和动画相关的溢出通常表现得最为明显。

识别过量的方法

水平滚动并不总是负面的。然而，在检查过度水平滚动时，请注意任何给人留下布局边界（通常是设计的右侧）未按预期工作的印象的东西。简而言之，在滚动过程中寻找超出布局边界边缘的额外空间或元素。您可以在 设计师 和 发布网站. 

在里面 设计师，识别潜在的不需要的水平滚动：

1. 访问 设计师
2. 滚动 左边 和 正确的 观察任何溢出视口的元素 
3. 调整 设计师 帆布
4. 调整画布大小以评估响应性和流畅度

笔记： 如果您使用的是触控板或移动设备，请左右滚动 - 但使用鼠标滚轮，按住 转移 通常支持左右滚动。

了解有关创建响应式设计的更多信息。

识别您身上不需要的多余部分 发布网站 （特别是在互动活跃的情况下）：

1. 发布 您的网站
2. 检查您的 相互作用 导致布局右侧出现剩余空间（尤其是在移动设备上）

交互过程中通常会出现过多的空白，因为即使在交互结束后，浏览器仍然认为交互需要在动画开始时使用的额外宽度。 

解决过剩问题的策略

您可以通过多种方法来防止水平滚动：

1. 利用过剩：隐藏
2. 评估你的布局及其响应能力
3. 注意你的互动设置
4. 探索替代解决方案
5. 应用多余：隐藏至整个页面

利用过剩：隐藏

建立父元素的 溢出 作为 隐: 

1. 识别 元素 导致不必要的水平滚动（例如，图像元素）
2. 选择其 父元素 （例如，一个部分）
3. 使用权 样式面板 > 尺寸 
4. 放 溢出 到 隐
5. 滚动 左边 和 正确的 验证多余的水平滚动是否已被删除

通过设置 溢出 到 隐，则隐藏超出父元素边界的元素。

请注意：当父元素具有 Overflow：hidden 时，Position：sticky 将不起作用。

注意布局响应能力

响应式设计在布局创建中至关重要。尽管设计可能完美适合某台显示器，但它可能会导致内容在不同视口尺寸上溢出。

为了确保响应能力：

1. 点击 预览 图标 设计师 （例如，点击“眼睛”图标） 
2. 调整 设计师 帆布
3. 调整画布宽度以测试不同的视口大小
4. 使用返回桌面断点 桌面 图标

您还可以模拟更大的显示屏：

1. 使用权 画布设置 来自设计师
2. 输入您想要预览的显示宽度
3. 使用断点按钮退出大屏幕预览

了解有关创建响应式设计的更多信息。

考虑你的交互设置

想象一下，你已经将交互应用到 标题，完成后， 标题 处于正确的位置。然而，最初， 标题 在屏幕外，导致不必要的水平滚动。

为了防止这种滚动：

1. 选择 标题
2. 设置父元素的 溢出 到 隐

此操作会隐藏边界之外的任何溢出，但可能会剪切动画。

要保留预期的动画功能，请删除 溢出：隐藏 来自 分区块 并将其应用于层次结构中的下一个父元素，即 部分:

1. 选择 标题
2. 设置父元素的 溢出 到 可见的
3. 选择下一个父元素（例如“Hero Section”）
4. 设置父元素的 溢出 到 隐

现在动画可以正常工作，并且不再出现溢出。

探索其他解决方案

您还可以尝试以下替代方案：

• 使用基于百分比的宽度和最大宽度来防止溢出。
  1. 分配给父元素并限制给子元素
  2. 使用部分的背景图像而不是内联图像元素（例如，如果图像是装饰性的并且应该出现在文本或其他内容后面，则选择背景图像）
  3. 采用 X 射线模式可以更好地可视化导致溢出的元素边界（在 Canvas 设置中可以切换 X 射线模式）
  4. 在设计器中浏览您的网站，同时将光标置于右侧额外的空白处上方，以检测导致溢出的元素

  进一步探索最小和最大尺寸以及背景图像。

  应用溢出：隐藏整个页面

  如果你正在考虑设置最高元素的 溢出 到 隐 - 这 身体 元素。

  实现 溢出 作为 隐 在 身体 会截断页面上的剩余内容，并阻碍用户在初始视口之外顺利滚动浏览页面。

  如果你需要执行 溢出 作为 隐 在整个页面上，您也可以使用 分区块 作为包装元素：

  1. 访问 添加面板
  2. 拖动 分区块 进入您页面下方 身体
  3. 转移 全部 您的页面元素 分区块 （例如，治疗 分区块 作为所有内容的包装）
  4. 选择您的 分区块 包装器
  5. 打开 样式面板 > 尺寸 并指定 溢出 作为 隐 （只有将所有内容移入 分区块 包装纸

  

  找到解决水平滚动问题的方法，是不是很高兴？别再隐藏它了！

  了解有关设计和溢流配置的更多信息。