skrollr相對不工作正常

Question

你好我嘗試瞭解sckrollr但我似乎在相對使用失敗，有什麼即時試圖得到的是：

• 有，裏面還
• 當一些元素的盒子X號該元素錨到達視口錨做的東西

我不明白我上面的代碼，並skrollr做作爲洙AI開始滾動頁面第二的.text元素的動畫，他should't只是讓僅當元素錨點到達視口錨點時動畫要麼？

我只是不明白

<style> 
     body{height:100% !important;} /*SOLUTION FOR THIS PROBLEM*/ 
     .paralaxelem2{width:100%;height:100%;background:50% 0 no-repeat fixed;background-size:100% 100%;} 
     .text{margin:0 auto;width:500px;padding:150px 0 0 0;position:relative;} 
     .text h1{padding:0px;margin:0px;text-transform:uppercase;color:#000;} 
     .text p{background-color:#000;color:#fff;padding:15px;} 
    </style> 


<section class="paralaxelem2" style="background-image:url('/images/fundos/bg_dummy_2.jpg');"> 
    <div class="text" data-0-top-top="opacity:1;" data--300-top-top="opacity:0;"> 
    <h1>SOme Home page title goes arround</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, est, consectetur, officiis, soluta impedit eveniet esse iusto temporibus asperiores quasi quos mollitia voluptates rerum quae voluptatem amet quidem totam. Et!</p> 
    </div> 
</section> 


<section class="paralaxelem2" style="background-image:url('/images/fundos/bg_dummy_1.jpg');"> 
    <div class="text" data-bottom-top="opacity:1;padding-top:150px;" data-bottom-bottom="opacity:1;padding-top:600px;"> 
    <h1>SOme Home page title goes arround</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, est, consectetur, officiis, soluta impedit eveniet esse iusto temporibus asperiores quasi quos mollitia voluptates rerum quae voluptatem amet quidem totam. Et!</p> 
    </div> 
</section> 


<section class="paralaxelem2" style="background-image:url('/images/fundos/bg_dummy_3.jpg');"> 
    <div class="text"> 
    <h1>SOme Home page title goes arround</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, est, consectetur, officiis, soluta impedit eveniet esse iusto temporibus asperiores quasi quos mollitia voluptates rerum quae voluptatem amet quidem totam. Et!</p> 
    </div> 
</section> 

Answer 1

報價https://github.com/Prinzhorn/skrollr#relative-mode-or-viewport-mode

重要提示：所有這些數值將被計算的前期，並轉化爲絕對模式。因此，如果元素的框高度發生變化（高度，填充，邊框）或文檔中的元素位置，則可能需要調用refresh（）（請參閱下面JavaScript部分的文檔）。窗口大小調整由skrollr處理。

在你的情況下，你正在動畫一個垂直填充，它與錨點發生衝突。這是一個雞/蛋問題。正如文檔中提到的refresh不會幫助你。您需要將附加填充作爲偏移量包含在關鍵幀中。

Answer 2

我發現這個問題的解決方案，似乎其他人與我有同樣的問題，所以事情是，skrollr設置身體高度自動做一些計算，它搞砸了白色元素有100％高度，如我的部分元素，所以解決剛纔在CSS表格「body {height：100％！important;}」中設置的問題。它解決了我的問題。

來源：https://github.com/Prinzhorn/skrollr/issues/347