Remove scrollbar

Ask the community
4

Hey this an example of what you were trying to achieve, again you need to create a section which is 100vh with it’s scroll overflow set to hidden,
and inside it a container of 400vh which is what you are animating.
in the code you keep a currentSection variable that you use in order not to scroll when you get to the first or last section, also there is a complete boolean variable that you need to use because you don’t want an animation to start before the previous one completed.
the wixWindow API allows you to get the current viewport height and that gives you the y property in the animation, so no matter what viewport you are using the “scroll” will always be accurate.

here is the [example:](example:
https://idoh33.editorx.io/mysite-34

this)
[https://idoh33.editorx.io/mysite-34](example:
https://idoh33.editorx.io/mysite-34

this)

[this](example:
https://idoh33.editorx.io/mysite-34

this) is the code:

import wixWindow from 'wix-window';
import wixAnimations from 'wix-animations';
// “Hello, World!” Example: https://www.wix.com/corvid/hello-world

$w.onReady(function () {
    btnScroll();
});

function btnScroll() {
 let currentSection = 1;
 let complete = true;
 
    $w('#up').onClick(() => {
        wixWindow.getBoundingRect()
            .then((windowSizeInfo) => {
 let windowHeight = windowSizeInfo.window.height; // 565
 if (currentSection > 1 && complete) {
                    complete = false;
                    wixAnimations.timeline().add($w('#movingContainer'), { y: `+=${windowHeight}`, duration: 400 }).play().onComplete(()=>{
                        complete = true;
                        currentSection--;
                    });
 
                }

            });
    })

    $w('#down').onClick(() => {
        wixWindow.getBoundingRect()
            .then((windowSizeInfo) => {
 let windowHeight = windowSizeInfo.window.height; // 565
 if (currentSection < 4 && complete) {
                    complete = false;
                    wixAnimations.timeline().add($w('#movingContainer'), { y: `-=${windowHeight}`, duration: 400 }).play().onComplete(()=>{
                        complete = true;
                        currentSection++;
                    });
 
                }

            });
    })
}