Trying to create a piece of Logic that recognises a mouse ScrollUP / mouse ScrollDOWN event.
I’ve used the code below to check the window viewport size. But it is also a way of logging the scroll position on the site.
Does anyone have any cool ideas on ways to create; say a value scrollYa and scrollYb IF a is greater than b = “scroll up event”, ELSE IF b is greater than a = “scroll down event”.
import wixWindow from 'wix-window';
$w.onReady(function () {
wixWindow.getBoundingRect()
.then((windowSizeInfo) => {
let windowHeight = windowSizeInfo.window.height; //
let windowWidth = windowSizeInfo.window.width; //
let documentHeight = windowSizeInfo.document.height; //
let documentWidth = windowSizeInfo.document.width; //
let scrollX = windowSizeInfo.scroll.x; //
let scrollY = windowSizeInfo.scroll.y; //
console.log(windowSizeInfo);
});
Please do not advise to use anchors or “OnViewPort_Enter” this is to add a float in / out effect on elements that get to the top / bottom of the viewport.
Here is an example of the working mouse scroll up and down events which can be used to get elements to appear in different directions based on direction of scroll.
import wixData from 'wix-data';
import wixLocation from 'wix-location';
import wixWindow from 'wix-window';
//define scroll variables (position as number and direction as string)
let ScrollPosition = 0
let ScrollDirection = ""
$w.onReady(function () {
//set refresh/sample rate for responsifyScroll
setInterval(responsifyScroll, 100);
});
function responsifyScroll() {
//get information about the window
wixWindow.getBoundingRect()
.then((windowSizeInfo) => {
//check for scrollY
if (ScrollPosition !== windowSizeInfo.scroll.y) {
// console.log(ScrollPosition)
//check if scrolling down
if (ScrollPosition < windowSizeInfo.scroll.y) {
ScrollDirection = "DOWN"
console.log("DOWN")
}
//check if scrolling up
else if (ScrollPosition > windowSizeInfo.scroll.y) {
ScrollDirection = "UP"
console.log("UP")
}
//set new scrollY
ScrollPosition = windowSizeInfo.scroll.y;
// console.log(ScrollPosition)
}
});
}
export function body1_viewportEnter(event) {
//create float motions
let floatUP = {
"duration": 500,
"delay": 250,
"direction": "bottom"
};
let floatDOWN = {
"duration": 500,
"delay": 250,
"direction": "top"
};
//check if scrolling direction and apply effect up or down float
if (ScrollDirection === "DOWN") {
$w("#panel1").show("float", floatUP);
$w("#image1VRheadset").show("float", floatUP);
} else if (ScrollDirection === "UP") {
$w("#panel1").show("float", floatDOWN);
$w("#image1VRheadset").show("float", floatDOWN);
}
}
export function body1_viewportLeave(event) {
//hide elements ready for next scroll
$w("#panel1").hide();
$w("#image1VRheadset").hide()
}
This is great! I have been looking for help on getting an image to rotate based on the user scroll. Is this something I can add to make this happen? I am new to Velo and still learning.