Skrollr.js使用文档作为定位目标，而不管指定了哪个定位目标

Question

我正在使用相对定位的<section>来以相对模式附加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;
    }
}