Skrollr.js使用文檔作爲錨定目標，無論指定了哪個錨定目標

Question

我使用相對定位<section> s以相對模式附加Skrollr事件。然而，Skrollr事件總是觸發，就好像文檔頂部是錨點一樣。我已經爲各個部分設置了data-anchor-target進行測試，但總是將文檔頂部作爲定位點。

我正在使用Skrollr樣式表，但我試過使用直的Skrollr和問題是相同的，因此我可以排除樣式表作爲原因。

是否有任何可能導致此問題的情況？

下面是一些代碼關鍵部分：

HTML

<div id="skrollr-body"> 
    <section id="section1" class="section section1"> 
     <div class="wrap"> 
      CONTENT 
     </div> 
    </section> 

    <section id="section2" class="section section2"> 
     <div class="wrap"> 
      CONTENT 
     </div> 
    </section> 

    <section id="section3" class="section section3"> 
     <div class="wrap"> 
      CONTENT 
     </div> 
    </section> 
</div> 

style.scss

body { 
    width: 100%; 
    overflow: hidden; 
    overflow-y: scroll; 
} 

#skrollr-body { 
    width: 100%; 
    height: 100%; 
} 

.section { 
    position: relative; 
    width: 100%; 
    padding: 50px 0; 
} 

skrollr.css

#section2 { 
    -skrollr-animation-name:animation1; 
} 

@-skrollr-keyframes animation1 { 
    200-top { 
     border: 5px solid red; 
    } 
} 

@-skrollr-keyframes animation1 { 
    -200-bottom { 
     border: 5px solid blue; 
    } 
} 

Answer 1

我無法重現你在說什麼。如果我複製你的代碼，沒有什麼是動畫。這是因爲你已經定義了animation1兩次。改爲：

@-skrollr-keyframes animation1 { 
    200-top { 
     border: 5px solid red; 
    } 

    -200-bottom { 
     border: 5px solid blue; 
    } 
}