0

我正在使用相对定位<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>

样式.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;
    }
}
4

1 回答 1

0

我无法重现你所说的。如果我复制您的代码，则根本没有动画。那是因为你已经定义animation1了两次。改用这个：

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

    -200-bottom {
        border: 5px solid blue;
    }
}
于 2013-04-30T08:37:00.387 回答