问题描述
我有一个使用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垂直滚动可以同时工作！
实际上，必须完成此部分的水平滚动，然后再进行其他部分的操作。
解决方法
将两者一起使用的唯一方法是使用带有scrollBar:true选项的fullPage.js，如this example一样。
new fullpage('#fullpage',{
scrollBar: true
});
您需要一个可见的滚动条才能使用skrollr。
不过，您也可以考虑使用fullPage.js callbacks和state classes来触发动画。观看此视频教程，这里说明了如何使用CSS3和整页状态类为事物设置动画： https://www.youtube.com/watch?v=qiCVPpI9l3M
,这是现场示例。看看这个。
尝试这样。
[skrollr.js和fullpage.js。 2合1] [1]
[1]: https://codepen.io/SomeOneOrAnyOne/pen/eYzZKMg
https://codepen.io/SomeOneOrAnyOne/pen/eYzZKMg