Jeg laver et pagineringssystem (lidt ligesom Facebook), hvor indholdet indlæses, når brugeren scroller til bunden. Jeg forestiller mig, at den bedste måde at gøre det på er at finde, når brugeren er nederst på siden og køre en ajax forespørgsel for at indlæse flere indlæg.
Det eneste problem er, at jeg ikke ved hvordan jeg skal tjekke om brugeren har scrollet til bunden af siden med jQuery. Nogen ideer?
Jeg skal finde en måde at kontrollere, hvornår brugeren har rullet til bunden af siden med jQuery.
Brug hændelsen .scroll()
på window
, som her:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("bottom!");
}
});
[Du kan teste det her][2], dette tager den øverste scroll af vinduet, så hvor meget det er rullet ned, tilføjer højden af det synlige vindue og kontrollerer, om det er lig med højden af det samlede indhold (document
). Hvis du i stedet ville kontrollere, om brugeren er næsten i bunden, ville det se nogenlunde sådan her ud:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
alert("near bottom!");
}
});
[Du kan teste denne version her][3], juster blot den 100
til den pixel fra bunden, som du ønsker at udløse på.
Nick Craver's svar virker fint, bortset fra det problem, at værdien af $(document).height()
varierer fra browser til browser.
For at få det til at virke i alle browsere skal du bruge denne funktion fra James Padolsey:
function getDocHeight() {
var D = document;
return Math.max(
D.body.scrollHeight, D.documentElement.scrollHeight,
D.body.offsetHeight, D.documentElement.offsetHeight,
D.body.clientHeight, D.documentElement.clientHeight
);
}
i stedet for $(document).height()
, så den endelige kode bliver:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == getDocHeight()) {
alert("bottom!");
}
});
For dem, der bruger Nick's løsning og får gentagne advarsler / begivenheder fyring, kan du tilføje en linje kode over advarsel eksempel:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
$(window).unbind('scroll');
alert("near bottom!");
}
});
Dette betyder, at koden kun vil affyres første gang, du er inden for 100px fra bunden af dokumentet. Den vil ikke gentage sig, hvis du scroller opad og derefter nedad igen, hvilket kan være nyttigt eller ubrugeligt afhængigt af, hvad du bruger Nick's kode til.