Remove scrollbar

Ask the community
1

Is there any way to remove the scrollbar and scrolling from my site?
I want to create a single page with 4 sections, but the user should only be able to scroll down, using a button.

2

Hey Sebastian, a way of achieving what you want to do here is adding one section setting it’s height to 100vh, and inside it a container that overflows it, which height is 400vh then animating this container using wix-animation timeline every time you click, I made a similar example (the difference is that in my example it also “scrolls” horizontally).
check it out(click menu buttons), tell me if you need further help.

this is the example(the scroll bar appears only because of the editor x banner, this can be fixed):
https://idoh33.editorx.io/sliding-nav

3

That looks so cool… I am looking at the timeline api, but I can’t really wrap my head around how you made it.
Any chance I can see the corvid code? :slight_smile:

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++;
                    });
 
                }

            });
    })
}