jQuery: Nachladen von Datensätzen beim Scrollen in einem DIV

Wie kann ich jQuery-Code ändern, um beim Scrollen in einem DIV die Datensätze nachzuladen?

Uhr
Es gibt zwei mögliche Lösungen um das Nachladen von Datensätzen beim Scrollen in einem DIV zu ermöglichen.

Lösung 1: Scroll-Ereignis an das DIV binden
Um das Scrollen im DIV zu überwachen, müssen wir das Scroll-Ereignis an das DIV binden. Der gegebene Code bindet das Scroll-Ereignis jedoch an das 🪟 (window) und nicht an das DIV. Hier ist der korrigierte Code:

```javascript
$(document).ready(function() {
var start = 0;
var count = 10;

$('#meinDiv').scroll(function() {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
$.ajax({
type: 'get',
url: '/includes/ajax.php',
data: { start: start, count: count },
success: function(response) {
$('.container').append(response);
}
});
start += count;
}
});
});
```

In dieser Lösung wird das Scroll-Ereignis an das DIV mit der ID "meinDiv" gebunden. Der Code überprüft, ob das Scrollen das untere Ende des DIVs erreicht hat und ruft dann den AJAX-Aufruf auf um weitere Daten zu laden. Die geladenen Daten werden dann der Klasse "container" hinzugefügt.

Lösung 2: Plugin verwenden
Eine alternative Lösung besteht darin » ein Plugin zu verwenden « das das Nachladen von Inhalten beim Scrollen unterstützt. Ein beliebtes Plugin dafür ist "Infinite Scroll" (https://infinite-scroll.com/). Hier ist ein Beispiel, ebenso wie man das Plugin verwenden kann:

```javascript
$(document).ready(function() {
var start = 0;
var count = 10;

$('#meinDiv').infiniteScroll({
path: '/includes/ajax.php',
append: '.container',
history: false,
status: '.loader',
debug: true,
scrollThreshold: 200,
prefill: true,
outlayer: false,
loadOnScroll: true,
checkLastPage: true,
responseType: 'html',
appendCallback: true,
dataType: 'html',
loadOnScroll: true,
scrollThreshold: 0
});
});
```

In dieser Lösung wird das "Infinite Scroll"-Plugin verwendet um das Nachladen von Inhalten zu ermöglichen. Das Plugin bietet viele Konfigurationsoptionen mit denen man das Verhalten des Nachladens anpassen kann.

Beide Lösungen sollten es dir ermöglichen Datensätze beim Scrollen in einem DIV nachzuladen. Wähle die zur Verwendung dich passende Lösung basierend auf deinen spezifischen Anforderungen und Vorlieben. Beachte auch – dass du den Code identisch deiner Projektstruktur anpassen musst.






Anzeige