0
要素が画面上にある（無限ローダーを実装しようとしている）ときを見つけようとしています。交差オブザーバAPIコールバック偶数要素が表示されない
残念ながら、リスト内の最後の項目をObserverにバインドして、残念ながらchrome 62 mac 10.10では、私が観察している要素がビューポートにない場合でもコールバックが発生します。
交差率を確認すると簡単に防止できます。これは交差点オブザーバーが機能する方法ですか？
ご協力いただきありがとうございます。
bindIO();
function ioCallback(entries, observer) {
console.log("entries");
console.log(entries);
entries.forEach(entry => {
// Each entry describes an intersection change for one observed
// target element:
console.log(entry.boundingClientRect);
console.log(entry.intersectionRatio);
console.log(entry.intersectionRect);
console.log(entry.isIntersecting);
console.log(entry.rootBounds);
console.log(entry.target);
console.log(entry.time);
});
}
function bindIO(arguments) {
var options = {
threshold: 1.0
}
observer = new IntersectionObserver(ioCallback, options);
}
var triggerel;
var lastIndex;
var items;
var observer;
setTimeout(function() {
observeEl();
}, 2000);
function observeEl(arguments) {
items = document.querySelectorAll('.item');
lastIndex = items.length
triggerel = items[lastIndex - 1];
observer.observe(triggerel);
}<!DOCTYPE html>
<html lang="en">
\t <head>
\t \t <meta charset="utf-8"/>
\t \t <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
\t \t <title>HTML BolierPlate</title>
\t <link rel="stylesheet" type="text/css" href="css/reset.css"></link>
\t <link rel="stylesheet" type="text/css" href="css/mystyle.css"></link>
\t \t <style>
\t \t \t .item{
\t \t \t \t background: green;
\t \t \t \t margin: 30px;
\t \t \t \t height: 400px;
\t \t \t \t width: 400px;
\t \t \t \t color: black;
\t \t \t \t font-weight: black;
\t \t \t }
\t \t \t
\t \t </style>
\t </head>
\t <body>
\t
\t Welcome to BoilerPlate!!!
\t \t
\t \t <div class="item-1 item">
\t \t \t
\t \t \t Items #1
\t \t </div>
\t \t <div class="item-2 item">
\t \t \t
\t \t \t Items #2
\t \t </div>
\t \t <div class="item-3 item">
\t \t \t
\t \t \t Items #3
\t \t </div>
\t \t <div class="item-4 item">
\t \t \t
\t \t \t Items #4
\t \t </div>
\t \t <div class="item-5 item">
\t \t \t
\t \t \t Items #5
\t \t </div>
\t \t <div class="item-6 item">
\t \t \t
\t \t \t Items #6
\t \t </div>
\t \t <div class="item-7 item">
\t \t \t
\t \t \t Items #7
\t \t </div>
\t \t <div class="item-8 item">
\t \t \t
\t \t \t Items #8
\t \t </div>
\t \t
\t \t <script src="js/lib/jquery.min.js" ></script>
\t <script src="js/myscript.js" ></script>
\t
\t </body>
</html>
DOM内に既に存在する要素を観察し始めたとき、交差点オブザーバは最初にそれをテストし、交差しているかどうかをチェックします。答えをありがとう –