Jedno pytanie odnośnie Intersection Observer API

pytanie zadane 1 czerwca 2018 w JavaScript przez Artek Stary wyjadacz (11,800 p.)

Dzięki IntersectionObserver API można wywołać funkcję gdy widoczność jakiegoś elementu przekracza ustaloną wartość. Ja natomiast potrzebowałbym wywołać funkcję gdy widoczność pewnego elementu jest mniejsza niż określona wartość. Da się tak?

1 odpowiedź

odpowiedź 1 czerwca 2018 przez Comandeer Guru (601,550 p.)
wybrane 3 czerwca 2018 przez Artek

Najlepsza

Tak.

komentarz 1 czerwca 2018 przez Artek Stary wyjadacz (11,800 p.)

Jakieś szczegóły?

komentarz 1 czerwca 2018 przez Comandeer Guru (601,550 p.)

MDN ma dobry przykład. Wszystko rozchodzi się o wartość tzw. tresholda.

komentarz 3 czerwca 2018 przez Artek Stary wyjadacz (11,800 p.)

No czyli wystarczy tu pokombinować :

entries.forEach(function(entry) {
    if (entry.intersectionRatio > prevRatio) {

Zastanawia mnie tylko jedna rzecz, po co jest ta pętla foreach?

komentarz 3 czerwca 2018 przez Comandeer Guru (601,550 p.)

Bo obserwatory zawsze zwracają tablicę wyników.

komentarz 3 czerwca 2018 przez Artek Stary wyjadacz (11,800 p.)

No właśnie tego nie czaję, czemu listę(chociaż należałoby chyba powiedzieć tablicę) a nie jeden obiekt?

2	komentarz 3 czerwca 2018 przez Comandeer Guru (601,550 p.) Bo obserwator nie ma obowiązku natychmiast powiadomić o wykrytej zmianie. Jeśli w krótkim czasie zajdzie więcej niż jedna zmiana, wówczas obserwator zwróci je wszystkie naraz.

komentarz 3 czerwca 2018 przez Artek Stary wyjadacz (11,800 p.)

Aha, no to teraz jasne. Dzięki.

komentarz 3 czerwca 2018 przez Artek Stary wyjadacz (11,800 p.)

@Comandeer, Chociaż nadal nie rozumiem dlaczego informacje na MDN zdają się radykalnie różnić od rzeczywistości. Na MDN napisano :

A threshold of 1.0 means that when 100% of the target is visible within the element specified by the root option, the callback is invoked.

No o.k wywołanie zwrotne zostanie uruchomione gdy cały element będzie widoczny - żadna filozofia. No to skoro tak to jak wytłumaczyć fakt iż w poniższym przykładzie wywołanie zwrotne jest uruchamiane w dokładnie odwrotnej sytuacji - czyli gdy jakakolwiek część elementu jest wyświetlana na ekranie.

https://codepen.io/anon/pen/VdevRK?editors=1111

komentarz 3 czerwca 2018 przez Artek Stary wyjadacz (11,800 p.)
edycja 3 czerwca 2018 przez Artek

edit : literówka w nazwie właściwości obiektu :/ Uwielbiam takie błędy :/ Tak przy okazji - wywołanie zwrotne jest odpalane zawsze na początku przy tworzeniu obiektu.