Kreuzungsbeobachter | Erstellen von unendlichem Scrollen in Ihrer Webanwendung
Wenn Sie kein Höhlenmensch sind oder Jeff Bezos nicht hassen (es spielt keine Rolle, selbst wenn Sie es tun), müssen Sie online eingekauft haben. Wenn Sie in diesen Online-Shops nach einem Artikel suchen, wird Ihnen eine Ergebnisliste angezeigt. Wenn Sie nicht so verrückt sind wie ich und nicht nach „ in Menschenblut getränkter Tigerzahn “ suchen , was zu spezifisch ist, besteht die Möglichkeit, dass Ihre Suchanfrage Tausende von Produkten enthält. Glauben Sie, Ihr Browser lädt all diese über 1000 Elemente zusammen? Nein , das wären zu viele Daten für den Browser, um die Benutzeroberfläche zu verarbeiten und zu berechnen. Trotzdem erhalten Sie weiterhin Artikel, wenn Sie das Ende Ihres Ergebnisses erreichen. Dies wird als unendliches Scrollen bezeichnet .
Hier ist ein Beispiel für unendliches Scrollen auf der YouTube-Startseite.
Es gibt mehrere Techniken, um dies mit JavaScript zu erreichen, aber die effizienteste ist die Verwendung einer süßen Web-API namens IntersectionObserver. Sehen wir uns an, wie Sie diese API verwenden, um eine eigene Mini-unendlich scrollbare Liste zu implementieren.
Das Konzept besteht darin, ein HTML-Element jedes Mal zu beobachten, wenn es in das Ansichtsfenster kommt, und dann einen Rückruf auszulösen. So erstellen Sie diesen Beobachter.
Lassen Sie uns eine HTML-Datei erstellen, die so aussieht.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Infinte Scroll</title>
</head>
<style>
.product {
padding: 20px;
border: 1px solid black;
margin-bottom: 20px;
opacity: 0;
margin-left: 100px;
transition: all 300ms;
}
.visible {
opacity: 1;
margin-left: 0px;
}
</style>
<body>
<div id="container">
<div class="product">Product</div>
<div class="product">Product</div>
<div class="product">Product</div>
<div class="product">Product</div>
<div class="product">Product</div>
<div class="product">Product</div>
<div class="product">Product</div>
<div class="product">Product</div>
<div class="product">Product</div>
<div class="product">Product</div>
<div class="product">Product</div>
<div class="product">Product</div>
<div class="product">Product</div>
<div class="product">Product</div>
<div class="product">Product</div>
<div class="product">Product</div>
<div class="product">Product</div>
<div class="product">Product</div>
<div class="product">Product</div>
</div>
<script src="./index.js"></script>
</body>
</html>
Lassen Sie uns zuerst alle Produktkarten nach ihrem Klassennamen abrufen
const cards = document.querySelectorAll('.product');
const productCards= document.querySelectorAll('.product');
const observer = new IntersectionObserver((entries) => {
// Todo
}, {
threshold: 0.95,
});
productCards.forEach((card) => {
observer.observe(card);
})
Ein weiterer Parameter im Konstruktor ist ein Objekt. Dieses Objekt bezeichnet die Optionen für diesen bestimmten Beobachter. In diesem Fall haben wir nur eine Schwelle. Schwelle ist hier eine Zahl, die einen beliebigen Wert von 0 bis 1 annehmen kann. Dies gibt den Prozentsatz des Objekts an, das wir beobachten, das im Ansichtsfenster sichtbar sein sollte, damit es als überschneidend betrachtet wird. Wir haben ihm einen Wert von 0,95 gegeben, was bedeutet, dass, wenn 95 % einer Produktkarte in den Darstellungsbereich kommen, diese Karte als Schnittpunkt mit dem Darstellungsbereich betrachtet wird.
Kehren wir zu unserer index.html -Datei zurück. Wir haben auch eine andere sichtbare Stilklasse, die im gestalteten Tag definiert ist. Wenn dieser Stil auf unsere Produktkarte angewendet wird, wird die Karte mit einer kleinen Animation ( Übergangseigenschaft ) wieder sichtbar.
Nehmen wir Änderungen an unserem Beobachter vor, sodass alle Produktkarten, die sich zu mindestens 95 % im Ansichtsfenster befinden, sichtbar sind und der Rest ausgeblendet wird.
const productCards = document.querySelectorAll('.product');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
entry.target.classList.toggle('visible', entry.isIntersecting);
})
}, {
threshold: 0.95
});
productCards.forEach((card) => {
observer.observe(card);
});
Es gibt jedoch einen Haken. Wenn wir nach oben scrollen, wird diese Klasse auch entfernt, wenn dies nicht der Fall ist, da wir eine Logik zum Umschalten der sichtbaren Klasse haben, wenn sich das Element schneidet. Wenn wir also nach oben scrollen, sehen wir, wie unsere Karten von oben verschwinden. Um dies zu beheben, hören wir auf, die Karten zu beobachten, die sich bereits geschnitten haben.
const productCards = document.querySelectorAll('.product');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
entry.target.classList.toggle('visible', entry.isIntersecting);
// unobserving entries which have already intersected
if (entry.isIntersecting) observer.unobserve(entry.target);
})
}, {
threshold: 0.95
});
productCards.forEach((card) => {
observer.observe(card);
});
Zuerst erstellen wir einen weiteren Beobachter, der nur die letzte Karte beobachtet.
const lastCardObserver = new IntersectionObserver((entries) => {
const lastCard = entries[0];
if (!lastCard.isIntersecting) return;
loadMoreCards();
lastCardObserver.unobserve(lastCard.target);
lastCardObserver.observe(document.querySelector('.product:last-child'));
}, {
threshold: 0.95
});
lastCardObserver.observe(document.querySelector('.product:last-child'));
function loadMoreCards() {
const container = document.getElementById('container');
for (let i = 0; i < 10; i++) {
const element = document.createElement('div');
element.classList.add('product');
element.innerText = 'Product';
observer.observe(element);
container.appendChild(element);
}
}
So sieht es jetzt aus!
Perfekte unendliche Schriftrolle!
In realen Anwendungen werden wir jetzt, anstatt mehr Karten zu laden, neue Daten über die API abrufen.
Lassen Sie mich wissen, wie Sie diese API kreativ in Ihren Anwendungen einsetzen können.
![Was ist überhaupt eine verknüpfte Liste? [Teil 1]](https://post.nghiatu.com/assets/images/m/max/724/1*Xokk6XOjWyIGCBujkJsCzQ.jpeg)
