Detecting scrolling up and scrolling down to change slideshow

Discussion Ask a question
, , ,
1

Question:
Can someone help me write a code that detects scrolling up and scrolling down?

Product:
Wix Editor

What are you trying to achieve:
I tried “writing” a code that detects when the user scrolls up and when they scroll down.
The goal is that a slideshow would show the next slide on scrolling down and vise versa.

I tried this code which I thought would change the background of the color of the background of the slideshow.

$w.onReady(function () {
let lastScrollTop = 0;
const myDiv = $w(‘#fullWidthSlides1’);

myDiv.onViewportEnter(() => {
window.addEventListener(‘scroll’, function(event) {
const scrollTop = event.scrollTop || document.documentElement.scrollTop;

  if (scrollTop < lastScrollTop) {
    // Scrolling up
    myDiv.backgroundColor = 'red';
  } else {
    // Scrolling down
    myDiv.backgroundColor = ''; // Reset to default
  }
  lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
});

});

myDiv.onViewportLeave(() => {
window.removeEventListener(‘scroll’);
});
});

But I get this error

comlink.ts:265 Uncaught (in promise) ReferenceError: window is not defined
at eval (s38wt.js?analyze-imported-namespaces=true&init-platform-api-provider=true&get-app-def-id-from-packa…:1:436)
at eval (webpack-internal://:1:3191)
at clientWorker.e2e4b6f8.bundle.min.js:6:183345
at Function. (clientWorker.e2e4b6f8.bundle.min.js:6:297120)
at MessagePort.n (clientWorker.e2e4b6f8.bundle.min.js:1:161221)
deserialize @ comlink.ts:265
E @ comlink.ts:519

I don’t know if it would be helpful, but the page I am trying it on is Meinteholl.com/test

2

Your code won’t work, no matter what you will try.

You must know, that working on wix-sites is different to the way of writing html+js-code like for example on JS-Fiddle, or Code-Pen. You are writing JS-Codes the regular way, but this won’t work on Wix-Sites.

What you will need it the following…
https://www.wix.com/velo/reference/wix-window-frontend/getboundingrect

And you maybe will need to generate an Intervall-Function, which will check each second if the scroll-position has been changed and into which direction

3

Hi there,

I just came across your post as I’m trying to achieve exactly the same with no luck. I can’t believe something that looks so simple is impossible to do.

Did you get a response that helped you or found a way to do this?

Thank you,

4
5

I’m trying with the following but it does not work either:

import wixWindow from 'wix-window';

$w.onReady(() => {
    const slideshow = $w('#slideshow1');
    let lastScrollTop = 0;

    function handleScroll() {
        wixWindow.getBoundingRect()
            .then((windowSizeInfo) => {
                const currentScrollTop = windowSizeInfo.scrollTop;
                if (currentScrollTop > lastScrollTop) {
                    slideshow.next();
                } else {
                    slideshow.previous();
                }
                lastScrollTop = currentScrollTop;
            });
    }

    document.addEventListener('scroll', handleScroll);
});
6

Like the post above already told you → your setup will not work!!!

You can’t use the following code-part on a Wix-Website…
document.addEventListener(‘scroll’, handleScroll);

You have 2 possibilities:

  1. DETECTING THE SCROLL-DIRECTION INSIDE A HTML-COMPONENT (where you can use your code)
  2. DETECTING THE CROLLDIRECTION DIRECTLY ON A WIX-PAGE
7

Thanks for your response. I’m trying the second one but with no luck!

8

I was able to do it with a section below the slideshow and this code

export function section2_viewportEnter(event) {
$w(“#fullWidthSlides1”).next();
$w(“#fullWidthSlides1”).scrollTo();
}

#fullWidthSlides1 is the id of the slideshow
#Section2 is the id of the section that is getting detected

The code detects when the section below the slideshow is in view, it will trigger the next slide show and scroll you back to the top. I used buttons to go back to specific slides. I liked the concept, but ended up not using it.

It is still online, you can check it out at, Meinteholl.com/test

9

Thanks for your response! I like the effect! It’s a shame that you need to add an extra section as I want to do it for my home age but I think I can work around it. However, the code doesn’t seem to work for me! Not sure if the section is too small? Is that the entire code? Thanks again!!

10

It can’t work out of my opinion.
Also normaly no extra elements needed.

This is not the code i was thinking of.

All you do is just using → scroll.to ← what can be found on every of wix elements.

What you nee instead i showed in previous of my answers.

Just imagine what you would need for your function, to determine if you are currently scrolling-up the page, or scrolling down.

You would need to mesure the current → POSITION <— of scrolled-page.
Comparing it with the last saved one!

So → your HELPER in this situation would be → setInterval()

Now every 3 sec. for example an automatic INTERVAL compares between Previous scroll-position and CURRENT scroll-position

1 Like
11

I don’t think measuring the position of the scroll will help in my case as I’m trying to set this up on my homepage with a slideshow that is 100vh, so the scroll position should not change but trigger the action when trying to scroll up/down.

12

If you can’t → scroll ← which will (out of my opinion) not trigger the scroll-action, how then the onScroll-Event should be started?

I think at least you need to scroll —> 1px to start the trigger.

Not sure, i never tested such use-cases, just logical thoughts → try it out!

13

Maybe the scroll action is not the one for this case but onMouseWheel?

Either way, I haven’t been able to achieve it.

14

—> onMouseWheel ← not available.

Where did you find it? → please show!

15

It’s probably not available on wix. However I found this one onMouseIn - Velo API Reference - Wix.com that could be interesting. Instead of the scrolling action maybe I can create an action using this where the slideshow goes to the next slide when the mouse is on the slide? Would this work?

16

Yes, this is another usecase.

onMouseIn would work for you, whenever you move your mouse over an element, the trigger would be activated on the selected element.

But this is a totally another usecase as already mentioned and has nothing similar with the TITLE of this post.

17

It has plenty of similarities. We are here to discuss an action and how to get there including possibilities and different alternatives, that’s all.