intersectionObserver回調調用外部閾值

嘗試瞭解intersectionObserver API中的問題。intersectionObserver回調調用外部閾值

如果觀察到的元素部分在屏幕上，但沒有達到選項中定義的閾值，我希望回調不會觸發，但它確實是。試圖瞭解爲什麼或如何在頁面加載時阻止它。

function handleIntersect(entries, observer) { 
    entries.forEach(function(entry) { 
    if (entry.isIntersecting) { 
     // Should only fire at >= 0.8 
     console.log(entry, entry.intersectionRatio); 
     entry.target.classList.add('play'); 
    } 
    }); 
} 

function createObserver(element) { 
    let observer; 

    const options = { 
    threshold: [0.8] 
    }; 

    observer = new IntersectionObserver(handleIntersect, options); 
    observer.observe(element); 
} 

const waypoints = document.querySelectorAll('.section'); 

waypoints.forEach(waypoint => { 
    createObserver(waypoint); 
});

減少測試用例： https://codepen.io/WithAnEs/pen/gxZPMK

通知所述第一2個部分是如何在即使第二部分不符合0.8的閾值（控制檯日誌）的動畫。第一個傾向是添加intersectionRatio > 0.8支票，但這是重複的工作。此外，比率報告延遲，因此可能不夠準確，不能通過此項檢查。

來源

2017-09-06 WithAnEs

isIntersecting不依賴於閾值。它是true，如果target元素觸及或相交root元素。所以它總是true如果intersectionRatio > 0。

如果觀察到的元素是部分在屏幕上，但並沒有達到規定的閾值的選項我希望再打不火，但它確實。

一般情況下，callback在條件intersectionRatio >= your_threshold被更改時被調用。因此可以使用任何intersectionRatio值來調用它。

此外，它始終被稱爲最初。

另請注意，0.8只是您想要的閾值，但observer.thresholds[0]是實際值。沒有深入細節，它們可能會有所不同，例如，在Chrome中。

來源

2017-09-29 11:25:38 dizel3d

不，我瞭解isIntersecting屬性。我添加了isIntersecting檢查，以防止每個交點觀察者實例觸發頁面加載。我遇到的問題是阻止初始頁面加載超出預定義閾值的元素。我可以添加一個可見百分比檢查，但考慮到閾值已定義，這似乎很奇怪。 – WithAnEs

更新了答案 – dizel3d

intersectionObserver回調調用外部閾值

回答

相關問題