Skrollr 和相关模式无法正常工作

Question

我正在尝试使用 skrollr 库 (https://github.com/Prinzhorn/skrollr) 来创建我认为的一个简单的功能，这意味着当底部顶部属性被触发时（顶部距离底部视口上方 25 像素时） ) 不透明度将为 0，然后当用户向下滚动时，当元素的底部位于底部视口上方 25 像素时，不透明度将增加到 1。

但是，当我加载 html 文件时，它在控制台中声明所有元素要么是 skrollable-after 要么 skrollable-between，而后面的两个元素肯定不是这种情况（至少当视口模糊时后两个元素）。最后一个元素被声明为可滚动的，而实际上它远低于视口的底部。

我确实认为加载各种资产可能存在问题，但 s.refresh() 并没有改变任何东西（至少在我使用它的方式上）。

HTML如下，其中skrollr.js是Github上最新的源文件（0.6.11）。

任何指导将不胜感激。

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="skrollr.js"></script>
</head>
<body>
<div class="column"><p>Column 1</p>
</div>

<div class="column"><p>Column 2</p>

    <div class="imp-text-one" data--25-bottom-top="opacity: 0;" data--25-bottom-bottom="opacity: 1">This is important text</div>

    <div class="placeholder"></div>

    <div class="imp-text-two" data--25-bottom-top="opacity: 0;" data--25-bottom-bottom="opacity: 1">This is also important text</div>

    <div class="placeholder"></div>

    <div class="imp-text-three" data--25-bottom-top="opacity: 0;" data--25-bottom-bottom:"opacity: 1">
    This is VERY important text</div>

</div>

<script type="text/javascript">
   s = skrollr.init();
</script>
<script>
 window.onload = function(){
     s.refresh();
}
</script>
</body>
</html>

CSS如下：

.column {
width: 50%; 
float: left;
}

body {
margin: 0;
padding: 0;
}

.imp-text-one {
padding: 50px 10px 50px 10px;
border-style: solid;
}

.imp-text-two {
padding: 50px 10px 50px 10px;
border-style: solid;
}

.placeholder {
height: 400px;
}

.imp-text-three {
padding: 50px 10px 50px 10px;
border-style: solid;
}

Answer 1

这是data-[offset]-(viewport-anchor)-[element-anchor] 而不是data-[offset]-(element-anchor)-[viewport-anchor]。

例如，您的第一个元素有两个关键帧都相对于视口底部。但它甚至从未接近底部！

正确：

<div class="imp-text-one" data--25-top-bottom="opacity: 0;" data--25-bottom-bottom="opacity: 1">This is important text</div>

<div class="placeholder"></div>

<div class="imp-text-two" data--25-top-bottom="opacity: 0;" data--25-bottom-bottom="opacity: 1">This is also important text</div>

<div class="placeholder"></div>

<div class="imp-text-three" data--25-top-bottom="opacity: 0;" data--25-bottom-bottom:"opacity: 1">
This is VERY important text</div>

编辑：您需要添加适当的文档类型，例如<!DOCTYPE html>。否则浏览器会切换到 skrollr 无法处理的 quirks 模式。