Question

我想用JavaScript生成<div>。当页面向下滚动并且最后一个div出现在屏幕上时，即使只有一点点，它下面也会生成新的5 <div> s。页面上的最后一个div的文字将被5整除（例如5,10,15,20 ...）。如果我在下面没有足够清楚的评论。

body {
    margin: 0;
    background-color: rgb(39, 40, 41);
    background-color: #00B9EF;
}

#navigation {
    background-color: #EFF3F4;
    width: 100%;
    height: 50px;
    z-index: -1;
}

button {
    font-size: 15px;
    color: white;
    background-color: #00B9EF;
    height: 40px;
    width: 80px;
    border: none;
    border-radius: 2px;
    display: block;
    margin: 5px 5% 0% auto;
    float: right;
}

#content {
    height: 100%;
    width: 70%;
    margin: 0% 15% 0% 15%;
    z-index: -1;
}

#box {
    height: 100px;
    width: 100%;
    background-color: white;
    display: block;
    margin: 15% auto 15% auto;
    text-align: center;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FlexBox</title>
</head>
<body>
    <div id="navigation">
        <button type="submit" name="submit">Login</button>
    </div>
    <div id="content">
        <div id="box">1</div>
        <div id="box">2</div>
        <div id="box">3</div>
        <div id="box">4</div>
        <div id="box">5</div>
    </div>

    <script>
        var content = document.getElementById("content");
        var box_val = 5;
        window.onscroll = function(ev) {
            if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
                console.log("bottom");
                var sentence = "";
                for (var x=1;x<=5;x++) {
                    sentence += "<div id='box'>" + (box_val + x) + "</div>";
                }
                box_val += 5;
                content.innerHTML += sentence;
                console.log("1: ", (window.innerHeight + window.scrollY), "\n2: ", document.body.scrollHeight);
            } else {
            }
        };
    </script>
</body>
</html>

Answer 1

必须将id="box"更改为class="box"，然后在class="box"中获得带有content的最后一个元素。但现在可以使用。

body {
    margin: 0;
    background-color: rgb(39, 40, 41);
    background-color: #00B9EF;
}

#navigation {
    background-color: #EFF3F4;
    width: 100%;
    height: 50px;
    z-index: -1;
}

button {
    font-size: 15px;
    color: white;
    background-color: #00B9EF;
    height: 40px;
    width: 80px;
    border: none;
    border-radius: 2px;
    display: block;
    margin: 5px 5% 0% auto;
    float: right;
}

#content {
    height: 100%;
    width: 70%;
    margin: 0% 15% 0% 15%;
    z-index: -1;
}

.box {
    height: 100px;
    width: 100%;
    background-color: white;
    display: block;
    margin: 15% auto 15% auto;
    text-align: center;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FlexBox</title>
</head>
<body>
    <div id="navigation">
        <button type="submit" name="submit">Login</button>
    </div>
    <div id="content">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
    </div>

    <script>
        var content = document.getElementById("content");
        var box_val = 5;
        const scrollOffset = 0; // change to higher value if you want to add new divs when scroll is on last box + scrollOffset
        window.onscroll = function(ev) {
            let box = content.querySelectorAll(".box:last-child")[0]; // get last box
            if ((window.innerHeight + window.scrollY) >= box.offsetTop + scrollOffset) { // check if scrolled past last box
                var sentence = "";
                for (var x=1;x<=5;x++) {
                    sentence += "<div class='box'>" + (box_val + x) + "</div>";
                }
                box_val += 5;
                content.innerHTML += sentence;
            } else {
            }
        };
    </script>
</body>
</html>

在滚动底部生成div

1 个答案: