奇怪！带有视差插件'skrollr'的doctype错误 [英] Strange !doctype bug with parallax plugin 'skrollr'
问题描述
好的，所以这在过去的两天里给我带来了太多的痛苦和悲伤，我最终把问题缩小了，但我没有接近解决它。
<我正在使用 Skrollr 插件构建一个视差网站。只要存在
<！doctype html> ，插件就会在我的文档中停止运行。 我创建了一个新的简单示例，它仍然会产生相同的错误。
奇怪的是，在他们自己的网站上，他们宣布同样的<！doctype html> ，因为它可以在那里工作。
我的代码：
<！doctype html>
< html>
< head>
< meta charset =UTF-8/>
< title>文件< / title>
< style>
.section1 {
身高：1000px;
背景：灰色;
}
.section1 img {
宽度：2000px;
身高：1000px;
}
.section2 {
宽度：2000px;
身高：1000px;
background：url（'background2.jpg'）;
仓位：绝对;
}
.section3 {
宽度：2000px;
身高：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;数据-0 = 顶部：0;数据-1200 = 顶部：350像素; >< / 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）{
返回1-p;
}
}
}）;
< / script>
< / body>
< / html>
您没有为值指定单位
你的： data-0 =top ：0;
正确： data-0 =top：0px;
当省略 DOCTYPE 时，浏览器变得不那么严格，假设你设置 top 时的平均像素至 100 或类似。
参见： https://github.com/Prinzhorn/skrollr#limitations
所有数值必须具有相同的单位。从0％到100px的动画是不可能的。 skrollr不会抱怨，但结果未定义。
Ok, so this has been causing me much pain and grief over the past two days and I finally narrowed the problem down but am in no way close to solving it.
I am building a parallax website using the Skrollr plugin. The plugin will cease to function in my document as soon as there is a <!doctype html> present.
I have created a new simple example and it's still producing the same bug.
The strange thing is that on their own website they are declaring the same <!doctype html> as I am but it works there.
My Code:
<!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>
You didn't specify a unit for the value of the top property of the first keyframe.
Yours: data-0="top:0;"
Correct: data-0="top:0px;"
When omitting the DOCTYPE, the browser becomes less strict and assumes you mean pixels when you set top to 100 or similar.
See also: https://github.com/Prinzhorn/skrollr#limitations
All numeric values have to have the same unit. It's not possible to animate from 0% to 100px. skrollr won't complain, but results are undefined.
这篇关于奇怪！带有视差插件'skrollr'的doctype错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
