3
我想借助skrollr制作一些漂亮的单页与一些动画。举一个非常简单的例子，有三张幻灯片，幻灯片只是固定位置，宽度和高度均为100％，最后一张幻灯片有一个溢出：自动启动，这样就可以滚动其内容，不需要任何动画，并且可能不会需要超过100％的高度，例如。关于，请联系我们和页脚部分。与溢出元素skrollr问题：滚动
我的理解是，我可以使用skrollr来设置不透明度0或元素上的无显示。第一个和第二个Z-index比第三个Z-index要高，所以隐藏前两个应该有第三个自动显示。
我用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
错误？不是它的目的是什么？更简单的方法呢？解决方法？我不想为了做同样的事情而去看一个独立的图书馆。
我需要第三个容器是可滚动的。它将包含关于我们的一些组件，与我们联系，并且页脚将超过不需要任何动画的页面的100％。 – archytect
太好了，谢谢你的澄清！我已经更新了我的答案/ codepen以完成您要查找的内容。 –
真棒。你改变了什么？高度？它适用于除Chrome之外的所有浏览器。 – archytect