问题描述
我有一个使用Fulpage.js的项目，并且我只想水平滚动该项目的其中一个部分。
所以我添加了Scrollr.js，但是问题是，它不起作用。
这是我的代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="./fullpage.min.css">
<title>Fullpage Animation</title>
<style>
body{
margin:0;
padding:0;
font-family: sans-serif;
}
.temps{
position:fixed;
top:0;
left:0;
width:100%;
display:flex;
}
.nemoone{
min-width:100%;
height:auto;
display:flex;
}
.nemoone .storyBx{
padding:100px 60px;
}
.nemoone .storyBx h2{
margin:0 0 20px;
padding:0;
font-size:48px;
}
.nemoone .storyBx p{
margin:0;
padding:0;
font-size:18px;
text-align: justify;
}
</style>
</head>
<body>
<div id="fullpage">
<section class="section s1">
<h1>Other</h1>
<div class="temps" data-0="transform:translateX(0%)" data-4000="transform:translateX(-300%)">
<div class="nemoone">
<div class="imgBx">
<!-- <img src="img2.jpg"> -->
</div>
<div class="storyBx">
<h2>Horizontal Scrolling</h2>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident,sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>Lorem ipsum dolor sit amet,sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="nemoone">>
<div class="imgBx">
<!-- <img src="img3.jpg"> -->
</div>
<div class="storyBx">
<h2>Horizontal Scrolling</h2>
<p>Lorem ipsum dolor sit amet,sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="nemoone">>
<div class="imgBx">
<!-- <img src="img4.jpg"> -->
</div>
<div class="storyBx">
<h2>Horizontal Scrolling</h2>
<p>Lorem ipsum dolor sit amet,sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="nemoone">>
<div class="imgBx">
<!-- <img src="img5.jpg"> -->
</div>
<div class="storyBx">
<h2>Horizontal Scrolling</h2>
<p>Lorem ipsum dolor sit amet,sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</section>
<section class="section s2">
<h1>Another Section</h1>
</section>
</div>
<script src="./fullpage.min.js"></script>
<script src="./skrollr.js"></script>
<script>
new fullpage("#fullpage",{
autoScrolling: true,navigation: true,onLeave: (origin,destination,direction) => {
const section = destination.item;
const title = section.querySelector("h1");
const tl = new TimelineMax({delay: 0.5});
tl.fromTo(title,0.5,{y: "50",opacity: 0},{y:0,opacity:1});
if(destination.index === 1){
const description = document.querySelector(".description");
tl.fromTo(description,opacity:1})
}
}
});
skrollr.init();
</script>
</body>
</html>
所以我的问题是如何使这两个插件同时工作？有没有可能？如果是，那怎么办？
非常感谢你们的任何想法，谢谢。
Alvaro的答案更新：
就像Alvaro所说的那样，为了使用这两个插件，我必须使用：
new fullpage('#fullpage',{
scrollBar: true
});
因此，当我这样做时，水平滚动有效，但是现在的问题是，水平滚动和fullpage.js垂直滚动可以同时工作！
实际上，必须完成此部分的水平滚动，然后再进行其他部分的操作。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）