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>
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.