Estoy tratando de crear un contenido en div cuando me desplazo, pero el problema es que cuando me desplazo hacia abajo crea contenido ilimitado y dura para siempre. Solo quiero crear solo un contenido en el div. Traté de buscar para obtener la respuesta, pero todo. Encontré que es lo mismo divs ilimitados cuando me desplazo aquí está mi código:
var messageGetter = $('#message1'); var firstChild = '<p class="message-content">I agree that your message is awesome!</p><div class="message-timestamp-right">SMS 13:37</div><div class="ball-right"></div>'; var secondChild = '<p class="message-content">I agree that your message is awesome!</p><div class="message-timestamp-right">SMS 13:37</div><div class="ball-left"></div>'; $(document).scroll(function(){ var clientH = document.documentElement.clientHeight; var memoY = messageGetter[0].getBoundingClientRect().y; var messageHight = messageGetter[0].getBoundingClientRect().height; if(clientH >= memoY){ $('#message1').append(firstChild); } }); .message-right { position: relative; display: inline-block; margin-top: 80px; margin-bottom: 20px; margin-left: calc(100% - 45%); padding: 10px; background-color: #2E456D; width: 380px; height: 150px; text-align: left; color: white; font: 400 .9em 'Open Sans', sans-serif; border: 1px solid #2E456D; border-radius: 10px; } .lower-container{ height: 1400px; background-color: #00B4D8; } .virt-line{ height: 1300px; width: 7px; background-color: #CAF0F8; position: absolute; margin: 50px 50% 50px 50%; } <div class="lower-container"> <div id="message1" class="message-right"> <!-- <p class="message-content">I agree that your message is awesome!</p> <div class="message-timestamp-right">SMS 13:37</div> <div class="ball-right"></div> --> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="index.js" charset="utf-8"></script>Debe desarmar su controlador de eventos después de que se haya realizado el trabajo. Marque el controlador:
$(document).on('scroll.ADD_CONTENT',function(){ ....Y elimínelo después de agregar su div:
if(clientH >= memoY){ $('#message1').append(firstChild); $(document).off('scroll.ADD_CONTENT'); ....