Help me write this mouse wheel scroll logic...

Hi guys and girls,

Looking for some help here.

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.

Looking forward to seeing some cool ideas…

SOLVED

Here you go guys, a cool bit of code for mouse scroll UP / DOWN events, or side bar scroll UP/ DOWN events.

import wixWindow from 'wix-window';
let ScrollPosition = 0
$w.onReady(function () {
setInterval(responsifyScroll, 100);
});
function responsifyScroll() {
wixWindow.getBoundingRect()
.then((windowSizeInfo) => {
//check for scrollY
if (ScrollPosition !== windowSizeInfo.scroll.y) {
//                console.log(ScrollPosition)
//check if scrolling down
if (ScrollPosition < windowSizeInfo.scroll.y) {
console.log("DOWN")
}
//check if scrolling up
else if (ScrollPosition > windowSizeInfo.scroll.y) {
console.log("UP")
}
//set new scrollY
ScrollPosition = windowSizeInfo.scroll.y;
//              console.log(ScrollPosition)
}
});
}

Calum

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.

@tranelj Yes, this looks like you could use it for your purposes.
And you will need something like that…
https://www.wix.com/velo/example/animation-helpers

Hi there …

To scroll from a location to another, you can follow this example .

There’s already a tutorial video about it if you want to follow a step by step guide.

Hope this helps!~
Ahmad