使用 Elementor 时如何修复移动设备上的水平滚动条？

您是否在移动设备上测试过 Elementor 网站，并发现当您开始向下滚动时，它会到处乱跑？当您左右移动手指时，它是否会在侧面显示奇怪的间隙以及不必要的水平滚动条？

如果您遇到这个问题，本文档将向您展示如何修复移动设备上的水平滚动条问题。

为什么会发生这种情况？

当页面上有一个或多个元素造成溢出时，就会发生此问题。 

什么是溢出？使用一些 Elementor 自定义设计设置，您可以将小部件内容“推出”其列区域。位于其列区域之外的这部分内容称为溢出。 

当小部件内容太大或位置超出移动设备的屏幕宽度时，就会产生水平滚动问题。为了向网站访问者显示此内容，您的浏览器需要添加水平滚动条。 

如何解决这个问题？

通过将溢出设置为隐藏，可以解决移动设备上的水平滚动条问题。您可以使用 Elementor 部分设置或添加 CSS 代码来执行此操作。

方法 1：使用 Elementor 设置修复溢出问题

您可以使用 Elementor 部分设置将溢出设置为隐藏。如果您有多个部分会产生溢出，则必须对每个部分执行此操作。如果这种情况发生在多个页面上，则必须在其他页面上重复此操作。

让我们向你展示如何做到这一点：

步骤 1 – 导航到出现溢出问题的页面，然后单击“使用 Elementor 编辑”；

第 2 步– 单击“编辑部分”选项开始编辑溢出部分；

步骤3 – 在“布局”选项卡下，向下滚动到“溢出”下拉菜单并选择“隐藏”选项；

步骤 4 – 单击“更新”保存更改。

就这样。您已解决了本节的问题。 

请记住，这会删除部分所有侧面的溢出。因此，如果您故意在部分的顶部和底部设置一些溢出，这些溢出也会被隐藏。 

在此屏幕截图中，您可以看到隐藏的溢出区域：

方法 2：通过添加 CSS 代码修复溢出问题

在两种情况下，此方法比使用 Elementor 选项更有帮助：

• 您需要将溢出保留在该部分的顶部和底部，同时将其隐藏在侧面以避免水平滚动；
• 您的网站上有太多元素存在溢出问题，您需要一个适用于整个网站的解决方案。

请按照以下步骤使用自定义代码消除溢出：

步骤 1 – 导航至外观 > 自定义 > 附加 CSS；

第 2 步– 添加以下 CSS 代码：

html,
body{
  width:100%;
  overflow-x:hidden;
}

步骤 3 – 单击“发布”保存更改。

此方法将删除所有部分和页面左侧和右侧的所有溢出。此外，它还会在需要时保持顶部和底部溢出仍然可见。您可以在此视频中看到它：