Question

我在哇js中使用可滚动div，例如：

<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

哇js可用于窗口滚动功能。要在任何有溢出的块级元素上实现哇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

1 个答案: