0
162
Viewsdiv content on scrolled bottom html javascript
i want to ask about div content scroll listener (not page). so I have an html code where the appearance of the web design resembles a native application. what I want to do is how do I detect if the user has scrolled down the content div? not a page because my web page for him is only silent, but the one that moves in the div. my div code is something like this
<div class="product-list-item">
//product card
//product card
</div>
and when i scroll like this
I want to see other products using ajax when it reaches the bottom of the div, for now I still using the manual button to load other products.
I've used this code but it's not working.
<script>
$(window).scroll(function() {
if($(window).scrollTop() == $(document).height() - $(window).height()) {
// ajax call get data from server and append to the div
}
});
</script>
does anyone have a solution for this? Thank you in advance.
1 answers
Answer question0
Assuming you have this:
<div class="product-list-item" id="target">
//product card
//product card
</div>
You can use this script to check if you reached your target div:
<script>
$(window).scroll(function() {
if ($(this).scrollTop()+$(this).height() >= $('#target').position().top) {
console.log('Target Reached');
}
});
</script>
You can use this approach to only execute the code once , once it has reached the target div
<script>
let isReached = false;
$(window).scroll(function() {
if ($(this).scrollTop()+$(this).height() >= $('#ftr').position().top && isReached == false) {
isReached = true;
//ajax call
}
});
</script>