如何在可滾動容器上使用wow.js

我想在我的網站上使用wow.js。我有一個邊欄，需要有一個容器內的內容overflow-x: auto;。因爲這個wow.js不起作用。如何在可滾動容器上使用wow.js

是否可以在wow.js中定義滾動容器？

我的網站是這樣的：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script type="text/javascript" src="lib/js/wow.js"></script> 
    <link rel="stylesheet" type="text/css" href="lib/css/animate.css"> 
    <script> 
     $("document").ready(function() { 
      new WOW().init(); 
     }) 
    </script> 
    <style> 
     body,html { 
      margin: 0; 
      padding: 0; 
      height: 100%; 
      width: 100%; 
     } 
     #container { 
      height: 100%; 
      width: 100%; 
      position: relative; 
     } 
     #menu { 
      position: absolute; 
      width: 300px; 
      left: -300px; 
      background: red; 
     } 
     #content { 
      position: absolute; 
      width: 100%; 
      height: 100%; 
      background: green; 
      overflow-x: auto; 
     } 
     .wow { 
      background: yellow; 
     } 
    </style> 
</head> 
<body> 
    <div id="container"> 
     <nav id="menu"> 
      <ul> 
       <li>sidebar1</li> 
       <li>sidebar2</li> 
       <li>sidebar3</li> 
      </ul> 
     </nav> 
     <div id="content"> 
      contentcontent<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="wow bounce">text</div>content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
     </div> 
    </div> 
</body> 
<script> 
</script> 
</html>

來源

2015-08-28 Pablo Christiano

問題解決了：

我已經改變了Contentcontainer的部分，使用此代碼初始化wow.js

var wow = new WOW({ scrollContainer: "section"}); 
wow.init();

謝謝無論如何

來源

2015-08-28 07:19:55

如何在可滾動容器上使用wow.js

回答

相關問題