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，例如<!DOCTYPE html> 。 否则，浏览器将切换到skrollr无法处理的怪癖模式。

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

问题描述

1 个解决方案

解决方案1
5 已采纳 2013-08-13 09:56:56

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

问题描述

1 个解决方案

解决方案1 5 已采纳 2013-08-13 09:56:56

解决方案1
5 已采纳 2013-08-13 09:56:56