Question

好的，所以这在过去的两天里给我带来了太多的痛苦和悲伤，我最终把问题缩小了，但我没有接近解决它。

我正在使用Skrollr插件构建一个视差网站。只要存在<!doctype html>，插件就会在我的文档中停止运行。

我创建了一个新的简单示例，它仍然会产生相同的错误。

奇怪的是，在他们自己的网站上，他们声称和我一样<!doctype html>，但它在那里有效。

我的代码：

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>

    .section1{
        height:1000px;
        background:gray;
    }

    .section1 img {
        width:2000px;
        height:1000px;
    }

    .section2{
        width:2000px;
        height:1000px;
        background:url('background2.jpg');
        position: absolute;
    }

    .section3{
        width:2000px;
        height:1000px;
        background:url('background3.jpg');
    }

</style>
</head>
<body>

<section class="section1">
    <div style="position:absolute; background:url('background1.jpg') no-repeat; width:100%; height:1000px; background-size:cover;" data-0="top:0;" data-1200="top:350px;"></div>
</section>
<section class="section2"></section>
<section class="section3"></section>

<script src="skrollr.min.js"></script>
<script>
    var s = skrollr.init({
            edgeStrategy: 'set',
            easing: {
                WTF: Math.random,
                inverted: function(p) {
                    return 1-p;
                }
            }
        });
</script>

</body>
</html>

Answer 1

您没有为第一个关键帧的top属性的值指定单位。

你的：data-0="top:0;" 正确：data-0="top:0px;"

当省略DOCTYPE时，浏览器会变得不那么严格，并假设您将top设置为100或类似内容时的平均像素。

另请参阅：https://github.com/Prinzhorn/skrollr#limitations

所有数值必须具有相同的单位。从0％到100px的动画是不可能的。 skrollr不会抱怨，但结果未定义。

Answer 2

我无法发表评论，但我有一个问题。你可以用CSS和JS发布一些HTML，这样我们可以更好看。

作为一个注释，有些东西与你的代码不同，如果不是，那么从逻辑上讲，你的代码应该有效。

您是否检查过他们的CSS / JS，并确保某些内容没有搞砸？

奇怪！带有视差插件'skrollr'的doctype错误

2 个答案: