Im trying to make an infinite scroll page. The script works well on my computer (Chrome) but not on my friend’s computer (chrome too). I saw it does work when it comes to detect the bottom of the page when the content at the bottom was append via ajax.
I also saw that the loading content works once i change the width of the page ( Just by moving the chrome’s console window).
I guess this is because the js does not take into count the DOM.
Any idea ?
JavaScript
x
43
43
1
start += limit;
2
var deviceAgent = navigator.userAgent.toLowerCase();
3
var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
4
5
$(document).bind("scroll", function() {
6
7
if(($(window).scrollTop() + $(window).height()) == $(document).height() || agentID && ($(window).scrollTop() + $(window).height()) + 200 > $(document).height()) {
8
load($("#search").val(), start, limit)
9
start += limit;
10
console.log("End of page detected")
11
}
12
});
13
14
function load(search, start=0, limit=20) {
15
16
$("#loader_active").show()
17
18
let form_data = new FormData();
19
form_data.append('search', search);
20
form_data.append('start', start);
21
form_data.append('limit', limit);
22
23
24
$.ajax({
25
26
url: "http://website.com/ajax/videos.php",
27
contentType: false,
28
dataType: "json",
29
processData: false,
30
cache: false,
31
data: form_data,
32
type: 'POST',
33
34
success: function (data) {
35
$(data).each(function(index, value) {
36
showVideo(value) // show video creates divs with jquery containing the data from the json received by the ajax call
37
})
38
$("#loader_active").hide()
39
40
}
41
})
42
}
43
Advertisement
Answer
The problem was caused by the equality condition:
JavaScript
1
2
1
$(window).scrollTop() + $(window).height()) == $(document).height() || agentID && ($(window).scrollTop() + $(window).height()) + 200 > $(document).height())
2
This can simply be fixed with
JavaScript
1
2
1
$(window).scrollTop() + $(window).height()) > $(document).height() - 100 ) || ( agentID && ($(window).scrollTop() + $(window).height()) + 200 > $(document).height())
2