小编Mic*_*ael的帖子

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

我正在尝试使用skrollr库(https://github.com/Prinzhorn/skrollr)来创建我认为这是一个简单的功能,这意味着当触发bottom-top属性时(顶部是在底部视口上方25px)不透明度将为0,然后当用户向下滚动时,当元素的底部比底部视口高25px时,不透明度将增加到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>

Run Code Online (Sandbox Code Playgroud)

CSS如下: