WOW JS 不适用于一页滚动答案

【问题标题】：WOW JS Not work with One page scrollWOW JS 不适用于一页滚动
【发布时间】：2018-03-26 20:49:09
【问题描述】：

我使用这个插件： http://www.thepetedesign.com/demos/onepage_scroll_demo.html

每次更改幻灯片时，我都想使用此插件对一个动画的每个部分的所有元素执行以下操作： https://github.com/matthieua/WOW

其他时候我使用 WOW JS，效果很好，但是这个组合 WOW JS + ONEPAGE SCROLL 不起作用..

只有第一个元素有效，其他幻灯片无法正确显示。

有人有想法吗？

谢谢

【问题讨论】：

标签： jquery css scroll wow.js

【解决方案1】：

正如@Burimi 所指出的，单页滚动实际上并不滚动站点，而是使用插件容器中的属性translate3d。

我鼓励您改用fullPage.js，它通过添加选项scrollBar:true 解决了这个问题，正如您在this example 中看到的那样，提供了更好的用户体验来保持滚动条。

如fullPage.js FAQs中所述：

Parallax，以及许多其他依赖于网站滚动的插件，监听 javascript 的 scrollTop 属性。 fullPage.js 实际上并不滚动站点，但它会更改站点的 top 或 translate3d 属性。只有在使用 fullPage.js 选项 scrollBar:true 或 autoScrolling:false 时，它才会真正以 scrollTop 属性可访问的方式滚动站点。

如果您不想使用scrollBar 选项，您仍然可以使用afterLoad 或onLeave 等回调，详细说明in the docs。

此外，fullPage.js 提供了与旧浏览器（例如 IE>7、Opera 12...）的兼容性，并且它提供了更多的选项，非常有用。

【讨论】：

【解决方案2】：

这是因为OnePage Scroll插件不会触发正常的浏览器滚动，所以你必须使用OnePage Scroll的afterMoveevent来触发WOW动画。

$(".main").onepage_scroll({
    afterMove : function(index){
        var this_slide = $(".main").eq(index);
        //you can perform a manual animation of this_slide, so check out the WOW Documentation
    }
});

【讨论】：