Competa Meetup 23 may 2018
TECH MENTOR CODEPAMOJA
RAYMON
❤️ JAVASCRIPT LOVER ❤️
JavaScript
Intersection Observer
⚡️ Lightning talk ⚡️
window.addEventListener('scroll', function() {
// execute function with every scroll event
})
For years we have had the scroll eventlistener
scroll event
MDN Develops Says:
Since scroll events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications.
Demo
Is a element visible?
Everytime a person scrolls in the browser it will fire a event. To check if it is visible, there needs to be a manual calculation with the "Element.getBoundingClientRect()"
scroll event
Intersection Observer
Intersection Observer
MDN Develops Says: 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.
Demo
Taking it next level with ease 🚀
Intersection Observer Next Level
Scroll event VS
Intersection Observer
Event is called a lot
Pretty heavy in combination with DOM manipulation
Heavy for slower mobile devices
Needs a lot manual calculation
Only called by your definition
More lightweight with DOM manipulation
Better for mobile devices
Easier to implement
Scroll event VS Intersection Observer
Thanks
for your time!