在可滚动的 div 中使用 wow.js

Question

我正在使用可滚动的 div 和 wow js，例如：

<div class="content-container">
    <h1>Some Content</h1>
    <h1>Some Content</h1>
    <h1>Some Content</h1>
    <h1>Some Content</h1>
    <h1>Some Content</h1>
    <h1>Some Content</h1>
    <h1 class="wow bounceIn">Some Content</h1>

</div>

我的 CSS 看起来像这样：

.content-container
   height: 20px;
   overflow-y:scroll;

问题是 wow.js 没有检测到我在 div 中制作的卷轴我发现了其他类似的问题并尝试了

wow = new WOW({scrollContainer:".content-container"});
wow.init()

但是这行不通，有什么方法可以使它起作用吗？

Answer 1

Wow js 可用于 window 滚动功能。在任何具有溢出的 block-level 元素上实现 wow js：滚动。您可以尝试以下解决方案

解决方案-

1. 使用 data-wow-duration 或 data-wow-delay 到 html 元素。示例-

<h1 class="wow bounceIn" data-wow-duration="1.5s">Some Content</h1>
<!--Or-->
<h1 class="wow bounceIn" data-wow-delay="1.5s">Some Content</h1>

2.使用jQuery（推荐）

var scrollable = $(".content-container");
wow = new WOW({
   scrollContainer: scrollable,

});

scrollable.on('scroll.wow', function() {
  scrollable.find('.wow:not(.animated)').removeAttr('style').addClass('animated');
  scrollable.find('.wow.animated').css({'animation-duration': '1.5s'})
});

wow.init();

.content-container {
  height: 60px;
  overflow-y: scroll;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet"/>

<div class="content-container">
  <h1>Some Content</h1>
  <h1>Some Content</h1>
  <h1>Some Content</h1>
  <h1>Some Content</h1>
  <h1>Some Content</h1>
  <h1>Some Content</h1>
  <h1 class="wow bounceIn">Some Content</h1>

</div>

有关更多详细信息，请查看 github 上的 Wow Js 问题。

在可滚动的 div 中使用 wow.js

Using wow.js inside a scrollable div

html

scroll

wow.js