Intersection Observer & Infinite Scroll in a Visual Way

Published: 20 July 2021
on channel: Lucas Paganini
19,733
193

In this video, I try to explain the IntersectionObserver in a real use case: implementing infinite scroll.

📚 Read the article: https://www.lucaspaganini.com/academy...
🚨 Subscribe to the newsletter: https://www.lucaspaganini.com/newsletter

📧 Email: [email protected]
🐦 Twitter:   / lucaspaganini  
📸 Instagram:   / lucaspaganini  

----------

CHAPTERS
0:00 Short Version
0:57 Introduction
1:54 The Problem with Scroll Events
2:25 Throttling
3:29 Debouncing
4:46 Reinterpreting the Algorithm
5:30 Intersection Observer
6:45 Intersection Margin
7:10 Browser Support
7:20 Intersections with Other Elements
8:04 Angular Directive
8:33 Conclusion

REFERENCES
1. Repository: https://github.com/LucasPaganini/publ...
2. Debouncing and Throttling Explained by David Corbacho: https://css-tricks.com/debouncing-thr...
3. Intersection Observer: https://developer.mozilla.org/en-US/d...
4. Lodash Docs: https://lodash.com/docs/4.17.15#throttle
5. Intersection Observer Polyfill: https://www.npmjs.com/package/interse...
6. Angular Utilities Library: https://www.npmjs.com/package/@lucasp...


Watch video Intersection Observer & Infinite Scroll in a Visual Way online without registration, duration hours minute second in high quality. This video was added by user Lucas Paganini 20 July 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 19,733 once and liked it 193 people.