1

私は skrollr ライブラリ ( https://github.com/Prinzhorn/skrollr ) を使用して、bottom-top 属性がトリガーされたとき (top がトリガーされたとき) を意味する単純な機能を作成しようとしています。下部ビューポートの 25 ピクセル上) 不透明度は 0 になり、ユーザーがさらに下にスクロールすると、要素の下部が下部ビューポートの 25 ピクセル上にあるときに不透明度が 1 に増加します。

ただし、html ファイルをロードすると、すべての要素が skrollable-after または skrollable- between のいずれかであることがコンソールに表示されますが、これは後の 2 つの要素には当てはまりません (少なくともビューポートが後の 2 つを覆い隠している場合)。要素)。最後の要素は、実際にはビューポートの下部のはるか下にあるにもかかわらず、スクロール可能であると述べられています。

さまざまなアセットの読み込みに問題がある可能性があると思いましたが、 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