Javascript Skrollr&；相对模式无法工作
我试图使用skrollr库（）创建一个我认为简单的功能，这意味着当触发bottom-top属性时（当顶部位于底部视口上方25px时），不透明度将为0，然后，当用户进一步向下滚动时，当元素底部位于底部视口上方25px时，不透明度将增加到1 但是，当我加载html文件时，它会在控制台中声明所有元素都是skrollable after或skrollable between，而后面两个元素肯定不是这样（至少在视口遮挡后面两个元素时是这样）。最后一个元素表示为可在两个元素之间滚动，而实际上它远低于视口底部 我确实认为加载各种资产可能会有问题，但s.refresh（）并没有改变任何东西（至少在我使用它的方式上） HTML如下所示，其中skrollr.js是Github（0.6.11）上的最新源文件 任何指导都将不胜感激Javascript Skrollr&；相对模式无法工作,javascript,html,css,scrollable,Javascript,Html,Css,Scrollable,我试图使用skrollr库（）创建一个我认为简单的功能，这意味着当触发bottom-top属性时（当顶部位于底部视口上方25px时），不透明度将为0，然后，当用户进一步向下滚动时，当元素底部位于底部视口上方25px时，不透明度将增加到1 但是，当我加载html文件时，它会在控制台中声明所有元素都是skrollable after或skrollable between，而后面两个元素肯定不是这样（至少在视口遮挡后面两个元素时是这样）。最后一个元素表示为可在两个元素之间滚动，而实际上它远低于视口底部
<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>
data-[offset]（视口锚定）-[element锚定]data-[offset]（element锚定）-[viewport锚定]<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>
这是重要的文本
这也是重要的文本
这是非常重要的文本
数据-[offset]（视口锚定）-[element锚定]数据-[offset]（element锚定）-[viewport锚定]<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，例如