Question

我使用相对定位<section>来以相对模式附加Skrollr事件。但是，Skrollr事件始终触发，就像文档顶部是锚点一样。我为各个部分设置了data-anchor-target进行测试，但始终将文档顶部视为锚点。

我正在使用Skrollr-stylesheets，但我尝试使用直接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;
    }
}

无论指定了哪个锚点目标，Skrollr.js都使用文档作为锚点目标

1 个答案: