1

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

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

我确实认为这可能是加载各种资产的问题，但 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;
}
4

1 回答 1

5

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

例如，您的第一个元素有两个相对于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 html>. 否则浏览器会切换到 skrollr 无法处理的怪癖模式。

于 2013-08-13T09:56:56.413 回答