Mic*_*ael 1 html javascript css scrollable
我正在尝试使用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>
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;
}
它是,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无法处理.