I am just wondering how can i implement more data on scroll only if the div.loading is visible.
Usually we look for page height and scroll height, to see if we need to load more data. but the following example is little complicated then that.
Following image is perfect example. there are two .loading div's on the drop down box. When user scroll the content, whichever is visible it should start loading more data for it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scroll More</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<style type="text/css">
.content {
display: none;
}
#loadMore {
width: 200px;
color: #fff;
display: block;
text-align: center;
margin: 20px auto;
padding: 10px;
border-radius: 10px;
border: 1px solid transparent;
background-color: blue;
transition: .3s;
}
#loadMore:hover {
color: blue;
background-color: #fff;
border: 1px solid blue;
text-decoration: none;
}
.noContent {
color: #000 !important;
background-color: transparent !important;
pointer-events: none;
}
</style>
</head>
<body>
<div class="container">
<div class="d-flex flex-wrap">
<div class="content m-5 p-5 bg-info flex-fill w-25">Flex item 1</div>
<div class="content m-5 p-5 bg-warning flex-fill w-25">Flex item 2</div>
<div class="content m-5 p-5 bg-primary flex-fill w-25">Flex item 3</div>
<div class="content m-5 p-5 bg-info flex-fill w-25">Flex item 4</div>
<div class="content m-5 p-5 bg-warning flex-fill w-25">Flex item 5</div>
<div class="content m-5 p-5 bg-primary flex-fill w-25">Flex item 6</div>
<div class="content m-5 p-5 bg-info flex-fill w-25">Flex item 7</div>
<div class="content m-5 p-5 bg-warning flex-fill w-25">Flex item 8</div>
<div class="content m-5 p-5 bg-primary flex-fill w-25">Flex item 9</div>
<div class="content m-5 p-5 bg-info flex-fill w-25">Flex item 10</div>
<div class="content m-5 p-5 bg-warning flex-fill w-25">Flex item 11</div>
<div class="content m-5 p-5 bg-primary flex-fill w-25">Flex item 12</div>
<div class="content m-5 p-5 bg-info flex-fill w-25">Flex item 13</div>
<div class="content m-5 p-5 bg-warning flex-fill w-25">Flex item 14</div>
<div class="content m-5 p-5 bg-primary flex-fill w-25">Flex item 15</div>
<div class="content m-5 p-5 bg-info flex-fill w-25">Flex item 16</div>
<div class="content m-5 p-5 bg-warning flex-fill w-25">Flex item 17</div>
<div class="content m-5 p-5 bg-primary flex-fill w-25">Flex item 18</div>
<div class="content m-5 p-5 bg-info flex-fill w-25">Flex item 19</div>
<div class="content m-5 p-5 bg-warning flex-fill w-25">Flex item 20</div>
<div class="content m-5 p-5 bg-primary flex-fill w-25">Flex item 21</div>
<div class="content m-5 p-5 bg-info flex-fill w-25">Flex item 22</div>
<div class="content m-5 p-5 bg-warning flex-fill w-25">Flex item 23</div>
<div class="content m-5 p-5 bg-primary flex-fill w-25">Flex item 24</div>
</div>
<a href="#" id="loadMore">Load More</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".content").slice(0, 2).show();$(window).scroll(function() {
if($(window).scrollTop() == $(document).height() - $(window).height()) {
$(".content:hidden").slice(0, 2).show();
if($(".content:hidden").length == 0) {
$("#loadMore").text("No Content").addClass("noContent");
}
}
});
$("#loadMore").on("click", function(e){
e.preventDefault();
$(".content:hidden").slice(0, 2).show();
if($(".content:hidden").length == 0) {
$("#loadMore").text("No Content").addClass("noContent");
}
});
});
</script>
</body>
</html>
