I’m trying to have a little Halloween fun, and I’m not up to speed yet on Wix’s api. I’m trying to add an event listener for scrolling.
I want to toggle a video from play to pause based on if the user is scrolling or not. If scrolling, play, if not pause.
The issue I am facing at the moment, is that the scrollY value is not updating. It’s reading the value once, and never changing. So, I haven’t even gotten to the logic yet.. anyone familiar with this?
Here’s what I have atm:
import wixWindowFrontend from "wix-window-frontend";
wixWindowFrontend.getBoundingRect().then((windowSizeInfo) => {
setInterval(() => {
//let windowHeight = windowSizeInfo.window.height;
//let documentHeight = windowSizeInfo.document.height;
let scrollY = windowSizeInfo.scroll.y; // offset from top left
console.log("position: " + scrollY);
}, 100);
// conditional logic goes here
});
});
Okay, I’ll answer my own question here. haha I guess I panicked, but I spent about another hour with it. My original issue, was that I was calling getBoundingRect() outside of the interval function. Then I struggled to get the logic right for a bit, but! Here is the solution:
import wixWindowFrontend from "wix-window-frontend";
var scrollY;
var lastPosition;
setInterval(() => {
wixWindowFrontend.getBoundingRect().then((windowSizeInfo) => {
scrollY = windowSizeInfo.scroll.y;
//console.log("position: " + scrollY);
});
if(scrollY !== lastPosition) {
console.log("scrolling");
//scrolling action here
lastPosition = scrollY;
} else {
console.log("stopped");
//stopped action here
}
}, 100);
It works in either direction of y (vertical). You could change it to scroll.x to get horizontal values.
