The new IntersectionObserver landed in Chromium about a week ago. I find it pretty awesome and wanted to do a quick run down on it.
This new API eliminates a lot of the headaches where you would have to do things like poll the page to determine when a element is visible. For example, I have a tab that is not selected and it contains some widget that needs to size itself. I hacked around it like this:
Other times, you might only log an ad impression when a user scrolls the ad into view. We would listen on the scroll event and constantly measure all the elements to determine if the rectangle was in view based on the scroll position like:
There are so many use cases! The website had a nifty gist I made into a ES6 Class to be a bit more abstract:
so essentially with that nifty code above ^, we can do this:
but WAIT, lets take it a step further….I’m using Angular2 so I made a Angular2 directive for it like this…
Hope you enjoyed! Follow me on Twitter and Github for more JavaScript opinions/projects/etc.
