Euromind
  • Javascript
    • Javascript

      Historiske administrative geografier i Google Maps

      20. april, 2022

      Javascript

      Kierkegaard injiceret med Javascript

      15. april, 2022

      Javascript

      Dansk evighedskalender

      7. december, 2020

      Javascript

      API til Statistikbanken

      21. september, 2019

      Javascript

      IntersectionObserver

      9. august, 2019

  • CSS/SCSS
    • CSS/SCSS

      Kierkegaard injiceret med Javascript

      15. april, 2022

      CSS/SCSS

      Dansk evighedskalender

      7. december, 2020

      CSS/SCSS

      Variable fonte med dansk tegnsæt i open source

      11. august, 2019

      CSS/SCSS

      Progressbar for dokumentposition

      31. juli, 2019

      CSS/SCSS

      Media Query i 2019

      18. juli, 2019

  • C#
    • C#

      Historiske administrative geografier i Google Maps

      20. april, 2022

      C#

      Authentication for IOS og Android med Firebase i…

      4. oktober, 2019

      C#

      Andersen, Grundvig, Kierkegaard og ML.NET – del 3

      5. september, 2019

      C#

      Hurtig eksport til Excel

      4. september, 2019

      C#

      Andersen, Grundtvig, Kierkegaard og ML.NET – del 2

      2. september, 2019

  • Javascript
    • Javascript

      Historiske administrative geografier i Google Maps

      20. april, 2022

      Javascript

      Kierkegaard injiceret med Javascript

      15. april, 2022

      Javascript

      Dansk evighedskalender

      7. december, 2020

      Javascript

      API til Statistikbanken

      21. september, 2019

      Javascript

      IntersectionObserver

      9. august, 2019

  • CSS/SCSS
    • CSS/SCSS

      Kierkegaard injiceret med Javascript

      15. april, 2022

      CSS/SCSS

      Dansk evighedskalender

      7. december, 2020

      CSS/SCSS

      Variable fonte med dansk tegnsæt i open source

      11. august, 2019

      CSS/SCSS

      Progressbar for dokumentposition

      31. juli, 2019

      CSS/SCSS

      Media Query i 2019

      18. juli, 2019

  • C#
    • C#

      Historiske administrative geografier i Google Maps

      20. april, 2022

      C#

      Authentication for IOS og Android med Firebase i…

      4. oktober, 2019

      C#

      Andersen, Grundvig, Kierkegaard og ML.NET – del 3

      5. september, 2019

      C#

      Hurtig eksport til Excel

      4. september, 2019

      C#

      Andersen, Grundtvig, Kierkegaard og ML.NET – del 2

      2. september, 2019

Euromind
Javascript

IntersectionObserver

af Per Lindsø Larsen 9. august, 2019
skrevet af Per Lindsø Larsen 9. august, 2019
IntersectionObserver

IntersectionObserver er en ofte overset Javascript API, der kan bruges til at forstå synligheden og placeringen af DOM-elementer i forhold til et overordnet element eller til dokumentets viewport (“root”). Positionen leveres asynkront og er nyttig til at afdække f.eks. hvor langt brugeren har scrollet ned på en side og hvilke elementer, der har været synlige. Er annoncer rent faktisk blevet set af brugeren?  IntersectionObserver er ligeledes nyttig ved eksempelvis implementering af udskudt indlæsning af DOM-indhold. 

IntersectionObserver er understøttet af alle relevante browsere (Safari fra ver. 12.2). Se “Can I Use It“.

Observeren initialiseres med 

const observer = new IntersectionObserver(callback,options);
observer.observe(target);

IntersectionObserver tager to parametre: reference til en callback-funktion og options. De præ-definerede værdier for options er

var options = {
  root: null,
  rootMargin: '0px',
  threshold: 1.0
}

Root henviser til elementet, der bruges som viewport for at kontrollere synligheden af det undersøgte element. Det kan sættes til et parent-element. Ved null anvendes browserens viewport. 

rootMargin giver mulighed for at definere en margin rundt om root-elementet. Format er en streng med margin-angivelse som i CSS, feks. “10px 10px 10px 10px”. Procentangivelse er også gyldig.

threshold kan enter være angivet som et enkelt tal (double) eller array af to eller flere tal mellem 0 og 1, f.eks.  [0, 0.25,  0.5, 0.75, 1]. Threshold angiver hvor stor en procentdel af elementer, der skal være synlig før callback aktiveres. I sidstnævnte eksempel altså ved 0, 25%, 50% og 100%. Anvender du default-værdier for options få du altså et callback når elementer er 100% synligt,

Et eller flere DOM-elementer, der skal observeres angiver du i observe(target).

const intersectItem = document.querySelectorAll('.item');
intersectItem.forEach(item => {
	observer.observe(item);
});

ELLER

var target = document.querySelector('#listItem');
observer.observe(target);

DOM-elementer kan efterfølgende fjernes fra observationslisten med

observer.unobserve(target);
ELLER
observer.disconnect();

Når der sker ændringer i synligheden af eller eller flere observerede elementer returnerer callback et array med objektet IntersectionObserverEntry for alle observerede elementer.

Objektet giver dig rect-oplysninger for både elementet og den del af elementet, der er synligt. I ovenstående tilfælde er elementet i sin fulde størrelse 404px højt. 179.1875px er synlig, hvilket giver intersectionRatio på 0.44 – altså at 44% af elementet er synligt. Time angiver tid i milllisekunder forløbet siden page-load.

Brug den booleanske variable isIntersected til at filtrere de relevante elementer:

let callback = (entries, observer) =>{ 
entries.forEach(entry => {
  if (entry.isIntersecting) {
      // Din kode her
  }
});

IntersectionObserver er et nyttigt redskab til de formål, som API’en er skabt til. Callback bør ikke overlæsses med arbejdsopgaver og det skal erindres at IntersectionObserver by-design giver kaldet lav prioritet og gennemføres, når browseren har ledig tid til det. 

LINKS:

MDN web docs: Intersection Obsrver API
W3C Working Draft Nov. 2018: Intersection Observer

CSSHTMLJavascriptSCSSWebdesign
0 Kommentarer
4
FacebookTwitterPinterestEmail
forrige post
Progressbar for dokumentposition
næste post
Andersen, Grundvig, Kierkegaard og ML.NET – del 1

Relaterede indlæg

Historiske administrative geografier i Google Maps

20. april, 2022

Kierkegaard injiceret med Javascript

15. april, 2022

Dansk evighedskalender

7. december, 2020

API til Statistikbanken

21. september, 2019

Navngivne RegEx-grupper i ECMAScript 2018

29. juli, 2019

RegEx: Unicode og Look Backward i ECMAScript 2018

24. juli, 2019

Media Query i 2019

18. juli, 2019

Danske Adressers Web API

17. juli, 2019

Forbind Visual Studio til IOS devices på 10...

12. juli, 2019

Barebone AMP i Codepen

9. juli, 2019

Efterlad en kommentar Afbryd svar

Gem mit navn, email, og website i denne browser til senere kommentarer.

Seneste indlæg

  • Historiske administrative geografier i Google Maps

    20. april, 2022
  • Kierkegaard injiceret med Javascript

    15. april, 2022
  • Dansk evighedskalender

    7. december, 2020

Kategorier

  • C#
  • CSS/SCSS
  • Excel
  • HTML
  • Javascript
  • Mobile
  • Webdesign
  • Xamarin

Om mig

Om mig

Per Lindsø Larsen

Freelance fullstack developer bosat i Aarhus.

Du kan hyre mig til korterevarende projekter eller konkrete opgaveløsninger.

Pæn rabat til non-profit organisationer og foreninger.

Når jeg ikke koder, deltager jeg løbende i diverse spændende forskningsprojekter om alt andet end kodning.

Keep in touch

Facebook Twitter Email Github

Tags

Adresser AMP AMP Story Android API Billedformater Billedoptimering Brand C# Codepen Cordova CPR Crome DevTools CSS Debug Ecmascript Excel Fonte Gmail Gulp HTML Ikoner IOS Javascript JsFiddle Machine Learning Mail Mediaquery ML.NET Mobile RegEx SCSS SMTP Stylometri Visual Studio Webdesign Xamarin

Nyhedsbrev

Timeld nyhedsbrev for info om nye blog-indlæg, tips m.v.

  • Facebook
  • Twitter
  • Email
  • Github

@2019 - Euromind.com - Code-To-Go. All Right Reserved.
lindsoe@gmail.com - mobil: 42797273


Tilbage til top
Euromind
  • Javascript
    • Javascript

      Historiske administrative geografier i Google Maps

      20. april, 2022

      Javascript

      Kierkegaard injiceret med Javascript

      15. april, 2022

      Javascript

      Dansk evighedskalender

      7. december, 2020

      Javascript

      API til Statistikbanken

      21. september, 2019

      Javascript

      IntersectionObserver

      9. august, 2019

  • CSS/SCSS
    • CSS/SCSS

      Kierkegaard injiceret med Javascript

      15. april, 2022

      CSS/SCSS

      Dansk evighedskalender

      7. december, 2020

      CSS/SCSS

      Variable fonte med dansk tegnsæt i open source

      11. august, 2019

      CSS/SCSS

      Progressbar for dokumentposition

      31. juli, 2019

      CSS/SCSS

      Media Query i 2019

      18. juli, 2019

  • C#
    • C#

      Historiske administrative geografier i Google Maps

      20. april, 2022

      C#

      Authentication for IOS og Android med Firebase i…

      4. oktober, 2019

      C#

      Andersen, Grundvig, Kierkegaard og ML.NET – del 3

      5. september, 2019

      C#

      Hurtig eksport til Excel

      4. september, 2019

      C#

      Andersen, Grundtvig, Kierkegaard og ML.NET – del 2

      2. september, 2019

Populære indlæg

  • 1

    Stylometri i C# – del 2

    7. juni, 2019
  • 2

    Andersen, Grundvig, Kierkegaard og ML.NET – del 1

    11. august, 2019
  • 3

    Send email fra Javascript med Gmail API

    21. juni, 2019
  • 4

    Gmail, Yahoo og Outlook som SMTP-server

    18. april, 2019
  • 5

    API til Statistikbanken

    21. september, 2019
@2019 - Euromind.com - Code-To-Go. All Right Reserved.
lindsoe@gmail.com - mobil: 42797273

Læs ogsåx

Registrer Gmail API til brug i javascript

27. juni, 2019

Gmail, Yahoo og Outlook som SMTP-server

18. april, 2019

Forbind Visual Studio til IOS devices på 10 minutter

12. juli, 2019