不正确的视口大小导致动画无法在滚动时执行答案

【问题标题】：Incorrect viewport size causing animations to not excute on scroll不正确的视口大小导致动画无法在滚动时执行
【发布时间】：2015-11-06 11:57:24
【问题描述】：

注意：这个问题已经解决了。查看这篇文章的底部以获取修复。

我有一个奇怪的问题，在过去的几天里我一直在努力解决这个问题。谢天谢地，我认为我已经将其隔离为一个错误的窗口/文档高度导致我的滚动动画永远不会出现的问题。我正在尝试使用 animate.css 中的 lightSpeedIn 动画来为 h2 标头设置动画，但是 wow.js 将简单地隐藏元素并且即使滚动过去也不会显示它。如果我删除 wow.js 并仅使用 Animate.css，h2 标题的动画效果会很好。

我已经使用以下代码进行了一些调试，我想我知道为什么 wow.js（我也尝试过使用其他滚动库但没有成功）正在破坏 - 由于某种原因 jQuery 报告了窗口高度和文档高度为 943。网站上显然有一个滚动条，所以我很确定我所做的任何滚动实现都不起作用，因为代码永远不会看到任何要滚动的内容。

  <div id="console">
    $(window).height() = <span id="winheight"></span> <br/>
    $(document).height() = <span id="docheight"></span>
</div>

将导致以下内容出现在网站上。

使用 wow.js 实现 - 不起作用

<h2 class="section-heading text-center wow lightSpeedIn">Sputnik Fact Sheet</h2>

在这种情况下 wow.js 似乎将以下样式分配给标题，但它似乎从未被切换。

visibility: hidden; animation-name: none

仅使用 animate.css 实现 - 有效

<h2 class="section-heading text-center animated lightSpeedIn">Sputnik Fact Sheet</h2>

关于此的最奇怪的事实是，问题只发生在网站的一部分上 - 我的 wow.js 在其他部分上工作得很好。一些使用萤火虫的挖掘发现动画“lightSpeedIn”在它存在时并不存在。我什至尝试将网站其他区域（例如旧版选项卡）的动画名称复制并粘贴到 h2 元素中，但它总是认为动画名称不存在。

我不知道如何解决这个问题。有人对我的问题有任何见解吗？您可以查看此问题的现场演示here。

更新 1：我认为这可能是插件/库不兼容，所以我删除了除 animate.css 和 wow.js 之外的所有内容 - 没有解决任何问题。我完全被难住了。

更新 2：尝试使用其他滚动库。他们也不工作。将其缩小到内容对视口“不可见”的可能问题。

更新 3：找到解决方案。这非常简单——我的 html,body 选择器上有 overflow-x: hidden。我删除了它，现在 wow.js 脚本可以正常工作。

【问题讨论】：

完美，这有助于找到问题。溢出-x 也确实导致了这里的问题。

标签： javascript jquery html animate.css wow.js

【解决方案1】：

找到了解决办法。这非常简单——我在我的 html,body 选择器中隐藏了 overflow-x: 。我删除了它，现在 wow.js 脚本可以正常工作了。

以前的 CSS 代码

html,body {
    height: 100% !important;
    margin: 0;
    background-color: #161519;
    color: #fffafa;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14.5px;
    line-height: 1.42857;
    max-width: 100%;
    overflow-x: hidden
}

固定的 CSS 代码

html,body {
    height: 100% !important;
    margin: 0;
    background-color: #161519;
    color: #fffafa;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14.5px;
    line-height: 1.42857;
    max-width: 100%;
}

【讨论】：