视口大小不正确导致动画无法在滚动

Question

注意：这已经解决了。查看此帖子的底部是否有修复。

我有这个奇怪的问题，我过去几天都把头发拉了过来。值得庆幸的是，我认为我已将它隔离到一个窗口/文档高度不正确的问题，导致我的滚动动画永远不会出现。我正在尝试使用来自 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脚本正常工作。

Answer 1

找到解决方案。它非常简单 - 我有溢出-x：隐藏在我的html，身体选择器上。我删除了它，现在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%;
}