gpt4 book ai didi

javascript - 如何在可滚动容器上使用 wow.js

转载 作者:行者123 更新时间:2023-11-27 23:56:01 27 4
gpt4 key购买 nike

我想在我的网站上使用 wow.js。我有一个侧边栏,需要将内容放入带有 overflow-x: auto; 的容器中。因此,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>

最佳答案

问题已解决:

我已将 Contentcontainer 更改为一个部分,并使用此代码来初始化 wow.js

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

还是谢谢

关于javascript - 如何在可滚动容器上使用 wow.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32265202/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com