i'm trying to create a content in div when scrolling but the problem is when i scroll down it creates unlimted content and it goes for ever i just want to create only one content in the div i tryed to search to get the answer but all i found is the same thing unlimted divs when scrolling here is my code :
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>You need to unset your event handler after job was done. Mark the handler:
$(document).on('scroll.ADD_CONTENT',function(){
....
And remove it after your div was added:
if(clientH >= memoY){
$('#message1').append(firstChild);
$(document).off('scroll.ADD_CONTENT');
....