I need a mouse wheel event

Ask the community
1

The long scrolling page is the trend these days.
but wix code does not support mouse wheel events.

I already know about viewpointenter.
As you know, designing with viewpointenter is a little awkward.

Please support the mouse wheel event.

4 Likes
2

Hi,
Can you please describe your scenario and what you try to achieve.

Shay

3

@Shay This is an excellent question.
I am trying to achieve the same thing on my website by using anchors and onViewpointEnter & onViewpointLeave.
The problem is that depending on the browser window size or computer screen size, the anchors donā€™t work properly in certain cases (most of them actually).
The scenario described by @ ķ•˜ėŠ˜ź³ ėž˜ is the following:
When you scroll up or down, with a mousewheel type of action, the screen jumps to the next important section of your page and sticks to it with a ā€œmagnetic effectā€. So if you are on a long page you can go to the next section by a mousewheel movement and the page smoothly jumps to the next section by automatically scrolling to it.
Something involving some kind of onMousewheelUp event with a $w(ā€œ#NextAnchorUpā€).scroll();
Iā€™m totally making this up by the wayā€¦
here is an exemple:
http://www.marcelww.com/

ANY THOUGHTS ON THIS? this would be a great feature to add in the future

4

Supporting wheel events will solve it. We will add it to our list.

Meantime, Iā€™d recommend using strips and onViewportEnter.

  • Use a strip for each section of your page.

  • Place an anchor on each strip top.

  • onViewportEnter scroll to the next anchor.

  • Youā€™d need to control the height of strips to avoid unintentional scroll on large screens. You can get the window dimensions and adjust what content is shown or hidden in a strip to control its height.
    Shay

5

Hi Shay,
Thanks for your answer. It would be great to have wheel events features indeed. Actually the solution you are giving Is what I did on my page but the problem when you scroll down and pass letā€™s say anchor2 which automatically takes you to anchor3, when you try to go back up and get to anchor2 but from the bottom it will take you again to anchor3 and youā€™ll end up in a loop that will prevent you from getting back to the top of the page.

You can always add additional anchors in the middle of your strips to trigger going back up but it gets tedious to get a good user experience with all the variety of screen sizes. I tried it and itā€™s very hard to get a smooth experience.
I definitely think the mouse wheel events would be a definitive and better way to get these results especially considering how most websites offer that type of scrolling experience. It makes long pages a little lame :unamused:.
Looking forward to hearing your thoughts shay!
By the way you can check my homepageā€¦ itā€™s a messā€¦ Iā€™m still working on the anchors disposition.
https://jusdopemusic.wixsite.com/audace3-left

Peace

6

Hi Shai,
Iā€™m trying to solve a similar problem and I think it almost turned out.

My code looks like this:

var trigger_1_2 = true;

function scroll_1_2() {
    if (trigger_1_2) {
      	$w("#slide2").scrollTo();
	}
}

var trigger_2_1 = true;

function scroll_2_1() {
    if (trigger_2_1) {
      	$w("#slide1").scrollTo();
	}
}

export function anchor1_viewportLeave() {
	scroll_1_2();
	trigger_1_2 = true;
	trigger_2_1 = false;
}

export function anchor1UP_viewportEnter() {
	scroll_2_1();
	trigger_2_1 = true;
	trigger_2_3 = false; // If I delete this row, scrolling down is always done, but scrolling up loops.
}

A similar code is used for other slides.

But I can not understand why scrolling down is performed only once ā€¦
Scrolling up is always done.

My new website https://wixmanns.wixsite.com/metateks
I would advise you to look at the site at a screen height of less than 1000 pixels (1366х768 is opitimal).

I would be grateful for any help. Thanks!

7

Hello,

Iā€™m also interested by this featureā€¦ any development ?

ty in advance for your answer

8

Hi shay,

Do you have something to present us?

I need it very much!!

For yesterdayā€¦ (brazilian slang)

9

Very interested in this feature, please add!

10

Hi guys,

Iā€™ve created a mouse wheel event. Hope you like it!

The bottom part is how I have coded it to interact with my elements, allowing them to float in view in different directions based on direction of scroll.

Here you go:

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()
}

Calum

11

Hi Calum, thanks a lot for your code, Iā€™m trying to use it, but havenā€™e been able to, itā€™s working ok for you? Thanks again for your help!