Using wow.js inside a scrollable div

Question

I am using a scrollable div with wow js like:

<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>

My CSS looks like this:

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

Problem is wow.js is not detecting the scrolls I make in the div I found other issues like this and tried

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

But this is not working so is there any way I can make this work?

Answer 1

Wow js works on window scroll function. To implement wow js at any block-level element that has overflow: scroll. You can try the following solution

Solution-

1. use data-wow-duration or data-wow-delay into html elements. Example-

<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. Use jQuery (Recommended)

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>

For more details please check Wow Js issue on github.