Intersection Observer

1. INTERSECTION
OBSERVER

2. Hello!
I AM JO FRANCHETTI
Web developer advocate @samsunginternet
@thisisjofrank
https://medium.com/@jofranchetti

3. SAMSUNG INTERNET
◦ Our team speaks at events and helps to
support communities
◦ We produce code demos and blog posts
◦ Our team is super friendly and love to
work on projects with users of our
browser, come speak to me after the talk.

4. SAMSUNG INTERNET
◦ Web browser for android phones
◦ Specific UX for our users (privacy, VR)
◦ 3rd most popular mobile browser
◦ Available on android 5.0+ devices
https://samsunginter.net/

5. INTERSECTION
OBSERVER

6. WHAT’S THE PROBLEM?
Large number of images on the page
Infinite scrolling
3rd party page-impression scripts cause bloat
Difficult/process intensive to calculate
?

7. Sluggish, janky
interactions

8. Large
downloads

9. No need to
watch/poll for
intersections

10. No need for 3rd
party libraries

11. Intersection
Observer API

12. “
The Intersection Observer API provides
a way to asynchronously observe
changes in the intersection of a target
element with an ancestor element or
with a top-level document's viewport.

13. EXAMPLE
https://codepen.io/thisisjofrank/pen/pdQzMr

14. LAZY LOADING IMAGES
https://www.livenation.co.uk/
https://medium.com/@aganglada/intersection-observer-in-
action-efc118062366

15. Creating an intersection observer
var options = {
root: document.querySelector('#scrollArea'),
rootMargin: '0px',
threshold: 1.0
}
var observer = new IntersectionObserver(callback, options);

16. Creating an intersection observer
Root
Target

17. Creating an intersection observer
var options = {
root: document.querySelector('#scrollArea'),
rootMargin: '0px',
threshold: 1.0
}
var observer = new IntersectionObserver(callback, options);

18. Creating an intersection observer
Root Margin
Target

21. Creating an intersection observer
var options = {
root: document.querySelector('#scrollArea'),
rootMargin: '0px',
threshold: 1.0
}
var observer = new IntersectionObserver(callback, options);

22. Creating an intersection observer
Callback executed!
Callback executed!

23. Creating an intersection observer
var options = {
root: document.querySelector('#scrollArea'),
rootMargin: '0px',
threshold: 1.0
}
var observer = new IntersectionObserver(callback, options);
var target = document.querySelector('#element');
observer.observe(target);

24. Creating an intersection observer
var callback = function(entries, observer) {
entries.forEach(entry => {
// entry.boundingClientRect
// entry.intersectionRatio
// entry.intersectionRect
// entry.isIntersecting
// entry.rootBounds
// entry.target
// entry.time
});
}

25. THIS IS A SLIDE TITLE
Here you have:
◦ A list of items
◦ And some text
◦ But remember not to overload
your slides with content
Your audience will listen to you or
read the content, but won’t do both.

26. DOWNSIDES?
Not Pixel perfect
Not low latency
Values will be ‘out of date’ by the time you get to use them
Spending too much time in the callback will cause lag
Differing levels of support across browsers
?

27. v
But wait! There’s
more!
DeltaV conf
deltavconf.com

28. GO FORTH AND
OBSERVE
INTERSECTIONS

29. Thank you!
Any questions?
@thisisjofrank
@samsunginternet