Создание div в нижней части прокрутки

Я хочу сгенерировать <div> с помощью javascript. Когда страница прокручивается вниз и когда на экране появляется последний div, пусть даже немного, под ним должны сгенерироваться новые 5 <div>. В последнем 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.info("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.info("1: ", (window.innerHeight + window.scrollY), "\n2: ", document.body.scrollHeight);
            } else {
            }
        };
    </script>
</body>
</html>

Я не уверен, понимаю ли я вашу проблему, но я запустил фрагмент, и он продолжает генерировать div. Также после 10.

— 10.12.2018 23:29

Если к завтрашнему дню никто не ответит, я найду решение. Я не за своим рабочим компьютером. Но вы можете попробовать сделать это с помощью jquery. И глядя на jquery Inviewport

— 10.12.2018 23:36

Понятия не имею, в чем твоя проблема. Я на 100 дивизионе и все еще иду.

— 10.12.2018 23:39

Вопрос был отредактирован выше

— 10.12.2018 23:47

Я думаю, вместо использования таких условий, как высота и дно, вы должны проверить, отображается ли последний элемент, используя смещение этого элемента, чтобы оно решило вашу проблему.

— 10.12.2018 23:49

javascript html

10.12.2018 23:24

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Спасибо, что сработало, этот метод offsetTop поможет мне и в будущем, я думаю, спасибо

— 10.12.2018 23:55

10.12.2018 23:49