您是否在移动设备上测试过 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 – 单击“发布”保存更改。
此方法将删除所有部分和页面左侧和右侧的所有溢出。此外，它还会在需要时保持顶部和底部溢出仍然可见。您可以在此视频中看到它：
