jquery - WOW JS 不适用于一页滚动

Question

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

每次你改变幻灯片时，我想用这个插件对一个动画的每个部分的所有元素做: https://github.com/matthieua/WOW

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

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

有人有想法吗？

谢谢

Answer 1

正如@Burimi 所指出的，onepage 滚动实际上并没有滚动网站，而是使用了插件容器中的属性 translate3d。

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

如 fullPage.js FAQs 中所述:

Parallax, as well as many other plugins which depends on the scrolling of the site, listens the scrollTop property of javascript. fullPage.js doesn't actually scroll the site but it changes the top or translate3d property of the site. Only when using the fullPage.js option scrollBar:true or autoScrolling:false it will actually scroll the site in a way it is accessible for the scrollTop property.

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

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