blocks|key|2309383|text|下面是我通过已关闭的Github问题：找到的解决方案，您可以将其添加到您的CSS中：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2309384|.wow+{
+++visibility:+hidden;
}|code-block|syntax|javascript|2309385|魔兽世界将切换到可见时，启动动画。|2309386|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/matthieua/WOW/issues/33^0|6|D|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

Here's the solution I found via a <a href="https://github.com/matthieua/WOW/issues/33" rel="noreferrer">closed Github Issue: </a>you can add this to your CSS:

<pre><code>.wow {
 visibility: hidden;
}
</code></pre>

WOW will then toggle it to visible when starting the animation.

blocks|key|2586330|text|然而，迟来的回应仍可能对其他人有所帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2586331|如果WOW.js在添加最新版本或添加<!DOCTYPE+html>之后仍然无法工作，那么问题可能是由于滚动(或者更具体地说是视图端口)中的冲突造成的。|offset|length|style|CODE|2586332|在我的例子中，这个问题是在我的CSS中使用以下内容时引起的：|2586333|html,+body+{height:100%25;+width:100%25;+overflow:hidden}|2586334|通过适当地移除高度和宽度，我能够解决这个问题，因为当元素进入视口Wow.js并更改元素的可见性时，能够注意到这个问题。|BOLD|2586335|entityMap^0|0|I|F|0|0|0|1H|0|1D|A|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|V|8|@$D|W|E|X|F|G]]|9|@]|A|$]]|$1|L|3|M|5|6|7|Y|8|@$D|Z|E|10|F|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|P|$]]

Late response however this still may help others.

If WOW.js is still not working after adding the latest version or adding <code>&lt;!DOCTYPE html&gt;</code> the problem may be due to a conflict in the scroll (or more specifically the viewport).

In my case, the problem was caused within my CSS when using the following:

<code>html, body {height:100%; width:100%; overflow:hidden}</code>

By removing the height and width properly, I was able to solve the problem as Wow.js was then able to notice when the element came into the viewport and change the elements visibility.

blocks|key|1591474|text|也有同样的问题。正在使用class="wow+bounceInUp"|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1591475|然后我试了+class="wow+bounceInUp+animated"|BOLD|1591476|它起了作用|1591477|编辑:最后，它没有工作。一开始起作用了，但后来停止了。更大的谜团：|1591478|entityMap^0|C|M|0|0|5|6|V|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@$9|S|A|T|B|H]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|I|3|J|5|6|7|W|8|@]|D|@]|E|$]]|$1|K|3|L|5|6|7|X|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|N|$]]

Had same problem.
was using
<code>class="wow bounceInUp"</code>

Then I tried
<code>class="wow bounceInUp animated"</code>

And it worked

EDIT: in the end, it didn't work. It worked at first but then stopped. Even bigger mystery :S

blocks|key|1591515|text|我遇到了同样的问题，我刚刚解决了这个问题。问题是，页脚中的<script>是不完整的，或者至少它对我不起作用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1591516|无论是谁遇到了这个问题，都可以尝试使用这段代码，就在</body>标记之前：|1591517|<script>
wow+=+new+WOW(+{
++++boxClass:+++++'wow',
++++animateClass:+'animated',
++++offset:+++++++100
++++}
);

wow.init();
</script>|code-block|syntax|javascript|1591518|entityMap^0|T|8|0|Q|7|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

I came across this same problem and I just figured it out. The issue was that the <code>&lt;script&gt;</code> in the footer is incomplete, or at least it didn't work to me.

Whoever's got this problem give a try to this code instead, just before the <code>&lt;/body&gt;</code> tag:

<pre><code>&lt;script&gt;
wow = new WOW( {
 boxClass: 'wow',
 animateClass: 'animated',
 offset: 100
 }
);

wow.init();
&lt;/script&gt;
</code></pre>

blocks|key|2309440|text|我今天也遇到了类似的问题，因为我使用的是一个固定的导航条宽度--高度为160+it+-在我看到内容之前就加载了它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2309441|我通过在WOW初始化中添加一个偏移量来解决这个问题：|2309442|new+WOW({offset:+160+}).init()|code-block|syntax|javascript|2309443|希望能帮上忙。|2309444|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I had a similar problem today, because I was using a fixed navigation bar width a height of 160px the content was loaded before I could see it.

I solved it by adding an offset in the WOW initialization :

<pre><code>new WOW({offset: 160 }).init()
</code></pre>

Hope it could help.

blocks|key|2586482|text|对于DesignofKA提出的答案，由于包装div中的固定高度属性，我也遇到了同样的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2586483|我只是在window.onload事件中加入wow来解决魔兽世界的问题。|2586484|我的代码是：|2586485|$(window).load(function()+{
++++var+wow+=+new+WOW({
++++++++boxClass:+'wow',
++++++++animateClass:+'animated',
++++++++offset:+0,
++++++++mobile:+true,
++++++++live:+true
++++});
++++wow.init();
});|code-block|syntax|javascript|2586486|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

For bouncing on the answer proposed by DesignofKA, I had the same issue due to fixed height property in a wrapping div.

I simply init wow during window.onload event to solve the wow problem.

My code is:

<pre><code>$(window).load(function() {
 var wow = new WOW({
 boxClass: 'wow',
 animateClass: 'animated',
 offset: 0,
 mobile: true,
 live: true
 });
 wow.init();
});
</code></pre>

blocks|key|2309240|text|如果我知道您正在使用的浏览器和WOW.js版本，这将是有帮助的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2309241|另外，请尝试一下，我们已经做了一些修改来解决火狐的问题，这也可能会解决你的问题。特别是在0.1.9中。|offset|length|2309242|如果您的问题仍然存在，请报告错误，并尝试提供一个示例页面，并告诉我们您使用的浏览器。|2309243|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/matthieua/WOW/releases/tag/0.1.9|1|https://github.com/matthieua/WOW/issues^0|0|18|5|0|0|C|4|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]|P|$5|K|L|M|A|$N|Q]]]]

It would be helpful if I knew the browser you are using and the WOW.js version.

Also, please give the <a href="https://github.com/matthieua/WOW/releases" rel="nofollow">latest version</a> a try, we've done some changes to address issues with Firefox which might fix your problem too. Particularly, in <a href="https://github.com/matthieua/WOW/releases/tag/0.1.9" rel="nofollow">0.1.9</a>.

If your problem persists, please <a href="https://github.com/matthieua/WOW/issues" rel="nofollow">report the bug</a>, and try to provide an example page and tell us which browser are you using.

blocks|key|2586301|text|我也有过类似的问题。我刚才忘了补充|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2586302|<!DOCTYPE+html>|code-block|syntax|javascript|2586303|这里的答案很有帮助-+wow.js只在滚动时起作用|offset|length|2586304|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/23580552/wow-js-only-works-when-scrolling-up^0|0|0|B|E|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

I had a similar problem. I had just forgotten to add 

<pre><code>&lt;!DOCTYPE html&gt;
</code></pre>

The answer here helped - 
<a href="https://stackoverflow.com/questions/23580552/wow-js-only-works-when-scrolling-up">wow.js only works when scrolling up</a>

blocks|key|1591636|text|根据@DesignofKA帖子。对我来说，它与这一行代码相冲突：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1591637|+-webkit-overflow-scrolling:+touch;|code-block|syntax|javascript|1591638|希望这能帮上忙。|1591639|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

In accordance with @DesignofKA post. For me it conflicted wit this line of code:

<pre><code> -webkit-overflow-scrolling: touch;
</code></pre>

Hopefully this was helpful.

I'm using <a href="http://mynameismatthieu.com/WOW/docs.html">wow.js</a>, and it works fine, except the animations all happen immediately after the page load, and not when they are scrolled to. I followed the docs, but can't figure it out.

There are no JS errors on the page. I included both animate.min.css and wow.js

in the body: 

<pre><code>&lt;img src="images/philosophy.png" alt="Philosophy" id="philosophy-img" class="icon wow bounceInUp"&gt;
</code></pre>

and in the footer:

<pre><code>&lt;script&gt;
 new WOW().init();
&lt;/script&gt;
</code></pre>

So how can use wow.js to get the animations to happen when scrolling to a particular div?

wow.js happens on page load and not on scroll

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我使用的是，它工作得很好，只是动画都是在页面加载后立即发生的，而不是当它们被滚动到的时候。我跟踪了医生，但搞不清楚。页面上没有JS错误。我包括了animate.min.css和wow.js在身体中：<img src="images/philosophy.png" alt="Philosophy" id="philosophy-img" class="icon wow bounceInUp">在页脚

问wow.js发生在页面加载，而不是滚动
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问wow.js发生在页面加载，而不是滚动EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问wow.js发生在页面加载，而不是滚动
EN