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