I'm trying to do some UX updates to a component and I'd like to use the Intersection Observer functionality (https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to show/hide a message when an html component is visible on the screen.
If I try and use the following I get an error "IntersectionObserver is not a constructor"
let observer = new IntersectionObserver(
function(entries) {
if (entries[0].isIntersecting === true) {
console.log("Element is fully visible in screen");
}
},
{ threshold: [1] }
);
observer.observe(this.template.querySelector("#stop"));
I assume the LockerService is stopping access to the API -am I correct? If so, is there a way around this? Or is there a way to provide similar functionality? Have googled with no success...
This is in an LWC so cannot just change the API version to 39.0 as in the docs.
Many thanks in advance.