0

滚动后该按钮将起作用，但如果您在滚动开始之前按下该按钮，它将不起作用。有没有办法解决它？我正在尝试制作一个只能在手机上看到的屏幕。如果它不起作用，我们可以像https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_scrollby3那样做吗？当您将溢出应用到屏幕时，window.scrollby(x, y) 不起作用。

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

2 回答 2

0

请注意，当您第一次打开 Pen 时，文本光标在 HTML 编辑器中闪烁。因此，当您按下向上/向下按钮时，您滚动的是 HTML 编辑器，而不是实际的页面预览。您必须开始滚动实际预览和/或单击它，以激活元素并通过按钮启用滚动。

于 2021-03-20T18:31:46.437 回答
0

您的代码笔在这里坏了，但是.down您.up在$("#wrapper").on("scroll"). 这样，点击事件仅在包装滚动后才对元素出价。

所以你需要把点击事件放在滚动事件之外。

于 2021-03-20T18:42:04.267 回答