我试图在skrollr的帮助下制作一个带有一些动画的漂亮单页。举一个非常简单的例子，有三个幻灯片，幻灯片只是固定在100％的宽度和高度，最后一个有溢出：auto on it因此可以滚动其内容，不需要任何动画和可能不需要超过100％的高度，例如。关于，请联系我们和页脚部分。
我的理解是我可以使用skrollr在元素上设置不透明度0或显示无。第一个和第二个具有比第三个更高的z指数，因此隐藏前两个应该让第三个自动显示。
我使用jQuery来确认
$('.slide1, .slide2').css('opacity', 0);
它工作正常，第三个容器显示，而其余容器不可见。但是使用skrollr，在所有其他浏览器中，除了ff之外，它会在我的macbook上使用触控板滚动，但在使用浏览器的滚动条时不会滚动。它表现得好像它在溢出中：隐藏。
skrollr.init();* {
padding: 0;
margin: 0;
}
section {
color: #fff;
padding: 25px;
}
header {
position: fixed;
z-index: 8;
}
.slide1,
.slide2,
.slide3 {
position: fixed;
width: 100%;
height: 100%;
}
.slide1 {
z-index: 7;
background: green;
}
.slide2 {
z-index: 6;
background: blue;
}
.slide3 {
z-index: 5;
background: yellow;
overflow: scroll;
}<!DOCTYPE html>
<html>
<head></head>
<body>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script>
<header></header>
<main>
<section class="slide1"
data-anchor-target="header"
data-start="display: block"
data-100p-start="display: none">
Slide 1<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
</section>
<section class="slide2"
data-anchor-target="header"
data-100p-start="display: block"
data-200p-start="display: none">
Slide 2<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
</section>
<section class="slide3"
data-anchor-target="header"
data-200p-start="display: block"
data-500p-start="display: block">
Slide 3<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
scroll?<br />
</section>
</main>
</body>
</html>
http://codepen.io/anon/pen/aZvRWw
错误？不是它的意图？更简单的方法吗？解决方法？我不想只是为了做同样的事情来调查一个单独的库。
答案 0 :(得分：0)
我在Chrome，FF和Safari中查看时遇到的问题是，当滚动条到达第3张幻灯片时，它会开始仅滚动该幻灯片中的内容。因此滚动条功能只会在该容器内滚动（不使用触控板时）。
编辑：由于第三张幻灯片需要可以独立滚动，因此不能position: fixed。相反，我们会像absolute那样：
.slide3 {
position: absolute;
top: 200%;
left: 0;
height: auto;
width: 100%;
}
并删除该幻灯片上的skrollr定义。由于它相对于正文定位，我们可以添加top: 200%属性，并且知道在前两个100%部分完成滚动后它将出现。这也允许通过完整的动画序列使用滚动条。
这是一个更新的codepen，其中添加了以下两个修补程序：
http://codepen.io/thecox/pen/PzPxYo
如果您想要完成不同的事情，请告诉我，我可以添加一些其他信息。