引导汉堡菜单在单击时在移动设备上向右移动，导致水平滚动和空白

Question

我有一个用 Bootstrap 构建的网站，它在桌面上运行良好。但是，当我在移动设备（android + chrome）上打开它时，第一次单击汉堡菜单后，它会向右移动，导致整个页面创建水平滚动，并在移动的汉堡菜单下方出现一条空白带。第一次加载时它是正确可见的。我还附上了屏幕截图，网址是 https://www.globalmeds.in/

我无法使用桌面上的开发人员工具复制它。它在 Chrome 桌面的每个分辨率下都能正常工作。

Answer 1

问题不是由汉堡菜单引起的，为了确认这一点，打开网站，从 Chrome 开发工具，切换到移动视图（响应式视图），您将看到在单击菜单之前就出现了滚动条。

正如我所料，它来自AOS Library，因为它会更改元素的位置，直到您滚动到它们，然后它将元素移动到其真实位置，您会看到这个问题，特别是对于具有 AOS 类的任何元素像

data-aos="fade-right"

或

data-aos="fade-left"

一样操纵 x 轴。

您可以通过将

overflow-x: hidden;

添加到动画元素的每个容器（父级）来解决此问题，在您的情况下，您可以添加以下内容：

.container-xl {
    overflow-x: hidden;
}

不过，我不建议这样因为会影响大家

.container-xl

在您的网站中，这可能会导致一些不良结果。

相反，您可以创建一个辅助 CSS 类：

.overflow-x-hidden {
    overflow-x: hidden;
}

然后在需要的地方使用它。

有些人会说为什么不使用引导程序现成的类

overflow-hidden

但这也会导致

overflow-y: hidden;

，这是没有必要的，也可能会导致不需要的行为。

P.S

AOS GitHub 存储库上已经有一个关于类似问题的未解决问题。 哈瓦看一下