How to move up and down by pressing the button without scrolling

Question

The button will operate after scrolling, but it will not work if you press the button before scrolling starts. Is there a way to solve it? I'm trying to make a screen that I can only see on my cell phone. If it doesn't work, can we do it in a way that https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_scrollby3 does? When you apply overflow to the screen, window.scrollby(x, y) does not work.

var scrolled = 0;

$(document).ready(function () {
    $("#wrapper").on("scroll", function(){
        var top = $(this).scrollTop();
        console.log(top);
        $(".down").on("click", function () {
            scrolled =  top + 100;
            $("#wrapper").stop().animate({
                scrollTop: scrolled
            });
            console.log(scrolled);
        });
        $(".up").on("click", function () {
            scrolled =  top - 100;
            $("#wrapper").stop().animate({
                scrollTop: scrolled
            });
            console.log(scrolled);
        });
    });
});

body {
    width: 750px;
    height: 3000px;
    -webkit-text-size-adjust: 100%;
    text-align: center;
}
#container {
    width: 600px;
    height: auto;
    margin: 0 auto;
    text-align: left;
}
.main_kaitai {
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0%;
    width: 100%;
    height: 100%;
    background: url(../img/bg2.png) no-repeat;
    background-size: 100% auto;
    z-index: 10;
    pointer-events: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.main_kaitai .btn_home {
    position: absolute;
    top: 122.066667vw;
    left: 6.4vw;
    width: 21.866666666vw;
    pointer-events: auto;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.main_kaitai .btn_arrow {
    position: absolute;
    top: 135vw;
    left: 33.7333333vw;
    width: 32.5333333vw;
    height: 32.5333333vw;
    background: url(../img/con_btn.png) no-repeat center center;
    background-size: 90% auto;
}
.main_kaitai .btn_arrow .base {
    position: relative;
    padding-top: 96%;
}
.main_kaitai .btn_arrow a.up {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30%;
    pointer-events: auto;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.main_kaitai .btn_arrow a.down {
    display: block;
    position: absolute;
    top: 65%;
    left: 0;
    width: 100%;
    height: 30%;
    pointer-events: auto;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.main_wrapper {
    overflow: auto;
    position: fixed;
    top: 24.066666666vw;
    left: 50%;
    margin-left: -40vw;
    width: 80.33333333333333vw;
    height: 104.46vw;
    background: #FDFFE0;
    z-index: 1;
}

.main_home{
    overflow: auto;
    width: 100%;
    height: auto;
    align-items: center;
}

.content1{
    width: 600px;
    height: 400px;
    background: orangered;
}

.content2{
    width: 600px;
    height: 400px;
    background: green;
}

.content3{
    width: 600px;
    height: 400px;
    background: blue;
}

.content4{
    width: 600px;
    height: 400px;
    background: black;
}

.content5{
    width: 600px;
    height: 400px;
    background: purple;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=750">
    <title>Document</title>
    <link rel="stylesheet" href="/css/style.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
    <div id="container">
        <div id="wrapper" class="main_wrapper">
                <div class="main_home">
                    <div class="content1"></div>
                    <div class="content2"></div>
                    <div class="content3"></div>
                    <div class="content4"></div>
                    <div class="content5"></div>
                </div>
            </div>
        </div>
    </div>
    <div id="keitai" class="main_kaitai">
        <div class="btn_arrow">
            <div class="base"></div>
            <a href="#" class="up"></a>
            <a href="#" class="down"></a>
        </div>
    </div>
    <script src="/js/main.js"></script>
    
</body>
</html>

You can have a boolean variable initiated as `false`. Once the user scrolls, set it to true. Then, add a check to the button click handler if this variable it true — Mosh Feu, Mar 20 '21 at 18:29
I'm attaching a video because I don't have enough explanation. https://vimeo.com/526651673 — katamela, Mar 20 '21 at 19:05

Aleister Crowley · Answer 1 · 2021-09-13T13:59:47.440

0

Notice that when you first open your Pen, the text cursor is blinking inside the HTML editor. Therefore, when you press the up/down buttons, you are scrolling through the HTML editor and not the actual page preview. You have to start scrolling the actual preview and/or click it, to activate the element and to enable the scrolling via buttons.

edited Sep 13 '21 at 13:59

answered Mar 20 '21 at 18:31

Aleister Crowley

443
1
6
16

score 0 · Answer 2 · answered Mar 20 '21 at 18:42

0

Your code pen is broken here, but you are declaring the on click events in .down and .up buttons inside the $("#wrapper").on("scroll"). This way, the click event is bidding to the element only after the wrapper scroll.

So you need to put the click events out the scroll event.

answered Mar 20 '21 at 18:42

Victor Assis

162
7

$(".down").on("scroll") >>>> Should I change the scroll to click? – katamela Mar 20 '21 at 19:16

How to move up and down by pressing the button without scrolling

2 Answers2