有时,页面上的元素可能会超出视口,从而导致水平或横向滚动的意外结果,从而显示布局周围的额外空白空间。并非所有水平滚动都是不受欢迎的,但如果它与您的设计相冲突,我们将指导您如何使用 Excess 来防止它:隐藏、自适应设计和有意的交互设置。
在本教程中,您将了解以下内容:
- 超额发生的原因
- 识别过量的方法
- 解决过剩问题的策略
超额发生的原因
许多因素都可能导致设计中出现不受欢迎的水平滚动,但通常是由于以下两个原因之一引起的:
- 设计布局包括一个元素,该元素的尺寸或位置应使其移出屏幕并超出视口。
- 在屏幕外开始的活动或动画。例如,如果您有一个从侧面进入的标题,则页面加载时其在屏幕外的初始位置可能会导致溢出,尽管动画完成后标题最终会到达正确的位置。
过多的水平滚动可能由与上述两种情况不同的情况引起,但布局和动画相关的溢出通常表现得最为明显。
识别过量的方法
水平滚动并不总是负面的。然而,在检查过度水平滚动时,请注意任何给人留下布局边界(通常是设计的右侧)未按预期工作的印象的东西。简而言之,在滚动过程中寻找超出布局边界边缘的额外空间或元素。您可以在 设计师 和 发布网站.
在里面 设计师,识别潜在的不需要的水平滚动:
- 访问 设计师
- 滚动 左边 和 正确的 观察任何溢出视口的元素
- 调整 设计师 帆布
- 调整画布大小以评估响应性和流畅度
笔记: 如果您使用的是触控板或移动设备,请左右滚动 - 但使用鼠标滚轮,按住 转移 通常支持左右滚动。
了解有关创建响应式设计的更多信息。
识别您身上不需要的多余部分 发布网站 (特别是在互动活跃的情况下):
- 发布 您的网站
- 检查您的 相互作用 导致布局右侧出现剩余空间(尤其是在移动设备上)
交互过程中通常会出现过多的空白,因为即使在交互结束后,浏览器仍然认为交互需要在动画开始时使用的额外宽度。
解决过剩问题的策略
您可以通过多种方法来防止水平滚动:
- 利用过剩:隐藏
- 评估你的布局及其响应能力
- 注意你的互动设置
- 探索替代解决方案
- 应用多余:隐藏至整个页面
利用过剩:隐藏
建立父元素的 溢出 作为 隐:
- 识别 元素 导致不必要的水平滚动(例如,图像元素)
- 选择其 父元素 (例如,一个部分)
- 使用权 样式面板 > 尺寸
- 放 溢出 到 隐
- 滚动 左边 和 正确的 验证多余的水平滚动是否已被删除