I read the API Reference but did not understand. I can assign an event for action scroll mouse down or scroll mouse up?
Hey
What do you mean by scroll mouse up and down, is it click events on mouse in and mouse out?
Hi!
At the moment I’m trying to understand whether I can create something like this with Wix Code https://searchingforsyria.org/en/
I could create 5-6 pages and switch between them using the mouse wheel.
For example more complex option GitHub - thebird/Swipe: Swipe is the most accurate touch slider.
Hi Eugene,
There’s nothing currently native in Wix Code that will let you create a site like that - we don’t have a mouseOnScroll event.
You may be able to recreate this functionality using ViewportMixin - Velo API Reference - Wix.com to track when a user scrolls by seeing when a new “screen” comes into view. You could then use Node - Velo API Reference - Wix.com to scroll to the next “screen” or page, although getting both pages to show in one screen may be tough.
You would also need to keep track of which “screen” is currently being displayed and it may help if you work with anchors Anchor - Velo API Reference - Wix.com.
If you give this a try make sure and show us how you got it to work!
another idea is to add anchor elements to the page.
then when an anchor enters the viewport (i.e. you get the onViewPortEnter event for the anchor), do some hiding/showing of images with animations.
p.s.
it’s an amazing site (in more ways than one).
if you build anything remotely as impressive - do share!
Hi guys,
Thanks for the help, it works 
https://wixmanns.wixsite.com/swype
I built the swype up and down (scrolling up works with hidden hotspots).
But it looks fine on the screen resolution of 1920x1080. If the screen resolution is 1366x768, then the effect is a little lost… I’ll try to use in this example a “rubber” galleries or Wix Pro Gallery. I hope this works.
1 Like
The scale in the web browser should be 100%. If the scale is 75 or 90%, an interesting effect is obtained 
Very cool!
how can you make to sroll up
Hi there,
I again went back to scrolling the mouse wheel and I’m trying to solve the problem of the screen scroll. I almost got it, but I’m confused…
I can’t understand why scrolling down is performed only once …
Scrolling up is always done.
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.
My website https://www.metateks.net/
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!
2 Likes
How many slides are there in total in your website?
Hi Prashant T,
Total 7 slides
1 Like
That’s cool and your website looks really good, I don’t see any problems, I tried zooming in and out and apart from the slides getting short vertically and mildly influencing the fluidity, there wasn’t any problem with it.
The up and down scrolls works perfectly.
Eugene, I’m new to wix code,Would you be willing to explain some things on your website:
var trigger_1_2 = true;
function scroll_1_2() {
if (trigger_1_2) {
$w("#slide2").scrollTo();
}
}
In this, did you define what’s “var trigger _1_2” anywhere else?
What is this?
and what are these"function scroll"?
Thank You.
I can understand if you don’t want to, because it’s your effort and it’s unfair for me to ask.
No problem. I’ll try to explain my code. This forum is intended for this purpose.
Sorry for my English.
I added the anchor to the first slide and called it “anchor1”
For him I marked the event “onViewportLeave” (the event is triggered when the anchor leaves the screen).
At the end of the slide, I added another anchor and called it “anchor1UP”
For him I marked the event “onViewportEnter” (the event is triggered when the anchor enters the screen area).
“anchor1” must perform a movement from 1 to 2 slide.
“anchor1UP” must perform movement from 2 to 1 slide.
If we add code
export function anchor1_viewportLeave() {
$w("#slide2").scrollTo();
}
export function anchor1UP_viewportEnter() {
$w("#slide1").scrollTo();
}
Nothing will work for us, since the “anchor1UP” will enter the screen area.
Accordingly, the movement will return to slide1.
So I tried using triggers to specify at what point in time to perform the function.
I asked in this post
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();
}
}
function scroll_1_2() - movement from 1 to 2 slides.
function scroll_2_1() - movement from 2 to 1 slide.
Similarly, I added anchors 2, 3, 4, etc. and triggers
var trigger_2_3 = true;
function scroll_2_3() {
if (trigger_2_3) {
$w("#slide3").scrollTo();
}
}
var trigger_3_2 = true;
function scroll_3_2() {
if (trigger_3_2) {
$w("#slide2").scrollTo();
}
}
etc.
and then for events my code looks like:
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;
}
But this only works for the first slide. I can not understand why scrolling down after the second slide stops working. Scrolling up works always.
example https://wixmanns.wixsite.com/slide1
I hope that the Wix Team will help me understand the reason for this.
Since the above code does not work, I changed it a bit for the website
https://www.metateks.net/
Instead of an “anchor1UP”, I added a strip “anchor1UP” and indicated “Hidden on load”
For the anchors of the first slide, my code became the next
export function anchor1_viewportLeave() {
scroll_1_2();
trigger_1_2 = true;
trigger_2_1 = false;
setTimeout( () => {
$w("#anchor1UP").show();
}, 1400);
}
export function anchor1UP_viewportEnter() {
$w("#anchor1").scrollTo();
trigger_2_3 = false;
}
When the “anchor1” scrolls down, the strip becomes visible and when you scroll up, the transition between the slides.
trigger_2_3 = false; // cancels the transition from 2 to 3 slides when anchor 2 leaves the screen area.
You also have to add the code
export function anchor1_viewportEnter() {
$w("#anchor1UP").hide();
}
export function anchor2_viewportEnter() {
$w("#anchor2UP").hide();
}
etc. for each slide. Otherwise, the scrolling will be cyclical.
This code works, but if you quickly scroll through the slides, the transition may not work. You can’t move to another slide.
This code is more complicated, so I would like to make the first version work without using “show” / “hide”.
5 Likes
Hello sorry for the late reply, your explanation was really thorough and helpful.
I learned a lot from it.
Thanks a lot Eugene, really appreciate it.
1 Like
Hi Prashant T, according to your reply above I suppose that you have finally find a solution for the “Scroll mouse down or scroll mouse up event”.
I have exactly the same problem like you had… 
I will be more than happy if you can copy paste the exact code (full code from A to Z) in order to copy paste to my wix site.
Sorry for asking but I am amateur to wix and I don’t know coding
Thank you in advance Lily
P.S. my website on wix is https://vaharidi6.wixsite.com/mysite and as you can see is a long website version and I need to go exactly to the next strip with scroll mouse event.
Thank you
1 Like
Hello, Lily.
I am not sure what you are asking, Should I copy and paste the complete code Here?
Also, I am relatively new to wix code too, and if you read Eugene’s explaination, it’s really thorough and he made it look so simple. He has even included screenshots to make it really understandable. (Hats off Eugene!)
Try to go through the explaination and you will understand how to implement the code.
Thank You.
1 Like
Hi Lily,
You can focus on my code and its description above. I haven’t come up with anything better yet. An example of how this works can be viewed on this website https://www.metateks.net/
1 Like