Implementierung des Scroll-Snap-Scroll-Ereignisstopps und der Elementpositionserkennung in CSS

1. Scroll Snap ist eine unverzichtbare Fähigkeit für Frontend-Entwickler

CSS Scroll Snap ist eine sehr nützliche Funktion, die es dem Browser ermöglicht, automatisch und reibungslos zur angegebenen Position des angegebenen Elements zu gelangen, wenn der Webseiten-Container aufhört zu scrollen, ohne dass JS-Code erforderlich ist. Mit reinem CSS lassen sich Effekte erzielen, die der Diashow-Werbung ähneln.

Darüber hinaus verfügt CSS Scroll Snap über eine hervorragende Kompatibilität und kann nahezu sicher auf Mobilgeräten verwendet werden.

2. Scroll-Snap-Szenarien aus realen Projekten

Als ich heute Nachmittag eine funktionale Anforderung implementierte, stieß ich zufällig auf ein Szenario, das sich sehr gut für die Implementierung mit Scroll Snap eignete, bei dem die Zeichen durch Verschieben der Reihe nach angezeigt werden. Also habe ich es mutig verwendet, wow, es ist großartig, kein JS zur Grenzbeurteilung erforderlich, es wird automatisch an die gewünschte Stelle gebracht, wenn das Gleiten stoppt.

Die wichtigsten CSS-Codes lauten wie folgt:

ul {
    Breite: 375px; Höhe: 667px;
    Scroll-Snap-Typ: x obligatorisch;
    -webkit-overflow-scrolling: berühren;
    Leerzeichen: Nowrap;
    Überlauf-y: versteckt;    
}
li {
    Anzeige: Inline-Block;
    Breite: 100 %; Höhe: 100 %;
    Scroll-Snap-Align: Mitte;
}

Setzen Sie scroll-snap-type:x mandatory das scrollende übergeordnete Containerelement, scrollen Sie horizontal und erzwingen Sie die Positionierung. Setzen Sie scroll-snap-align:center für das untergeordnete Listenelement, damit die Liste in der Mitte des scrollenden Containers angezeigt wird, sodass der Effekt erzielt wird.

Nach Abschluss der Bildlaufpositionierung muss das aktuell positionierte Zeichenmaterial jedoch weiterhin hervorgehoben werden. Das fand ich etwas schwierig!

In der Vergangenheit wurde dieser Gleiteffekt mit JS implementiert. Unabhängig davon, ob die JS-Animation endete oder die CSS-Animation endete, gab es eine Rückruffunktion, die verwendet werden konnte. Aber hier rollt es, und nachdem es gerollt ist, positioniert es sich für eine Weile. Die Zeit der Selbstpositionierung variiert. Wer weiß, wann es aufhört? Manchmal verschieben Sie mehrere Elemente gleichzeitig und sind sich nicht sicher, bei welchem ​​Element Sie anhalten sollen.

Tatsächlich fördern Standardgeber und Browserhersteller aktiv die Implementierung von Scroll Snap-bezogenen Callback-Ereignissen, damit wir genau wissen, wann das Scrollen stoppt und auf welchem ​​Element das Scrollen positioniert ist. Der Standard befindet sich jedoch noch in der Entwicklung und wird von Browsern noch nicht unterstützt. Das Projekt muss jetzt verwendet werden. Was muss ich tun?

Rechts! Es muss JS-Unterstützung verwendet werden.

Auch wenn dies nicht das Anwendungsszenario von Scroll Snap ist, sondern sogar beim normalen Scrollen, ist aufgrund der Trägheit des Scrollens das Erkennen, ob das Scrollen gestoppt wurde, eine allgemeine Anforderung. Daher ist es notwendig, eine Methode zu finden, um zu erkennen, wann das Scrollen stoppt.

3. Meine Methode zur Erkennung von Scroll-Unterbrechungen

Um zu erkennen, ob das Scrollen eines Elements gestoppt wurde, besteht meine Implementierungsidee darin, im Scroll-Ereignis einen Timer laufen zu lassen, um aufzuzeichnen, ob die Scroll-Distanz zum aktuellen Zeitpunkt gleich der Distanz des vorherigen Scrollens ist. Wenn sie gleich sind, wird davon ausgegangen, dass das Scrollen gestoppt wurde. Wenn sie nicht gleich sind, wird davon ausgegangen, dass das Scrollen noch im Gange ist.

Die JavaScript-Darstellung ist ( diese Implementierung ist veraltet ):

// Timer, wird verwendet, um zu erkennen, ob das horizontale Scrollen beendet ist. var timer = null;
// Die letzte Scroll-Distanz var scrollLeft = 0, scrollTop = 0;
// Scroll-Ereignis startet container.addEventListener('scroll', function () {
    Intervall löschen(Timer);
    //Setze den Timer zurück timer = setInterval(function () {
        wenn (container.scrollLeft == scrollLeft und container.scrollTop == scrollTop) {
            // Wenn die Bildlaufdistanz gleich ist, wird davon ausgegangen, dass der Bildlauf beendet wurde. clearInterval(timer);
            // ... tun Sie, was Sie wollen, beispielsweise die Verarbeitung von Rückrufen } else {
            // Ansonsten immer noch die letzte Scrollposition merken scrollLeft = container.scrollLeft;
            scrollTop = Container.scrollTop;
        }
    }, 100);
});

Bei Interesse können Sie den obigen Code weiter kapseln.

Aktualisiert am nächsten Tag

Bei der Scroll-Beendigungserkennung muss nicht ermittelt werden, ob die vorherige und die nächste Scroll-Distanz gleich sind, da sowohl Trägheits- als auch Snap-Positionierungs-Scroll-Ereignisse kontinuierlich ausgelöst werden. Daher ist es möglich, direkt:

// Timer, wird verwendet, um zu erkennen, ob das horizontale Scrollen beendet ist. var timer = null;
// Scroll-Ereignis startet container.addEventListener('scroll', function () {
    Zeitüberschreitung löschen(Timer);
    //Setze den Timer zurück timer = setTimeout(function () {
        // Es wird kein Scroll-Ereignis ausgelöst, daher wird das Scrollen als gestoppt betrachtet // ... tun Sie, was Sie tun möchten, z. B. die Verarbeitung von Rückrufen }, 100);
});

Natürlich ist die oben angegebene Methode keine sehr genaue Beendigungserkennung, da der Browser selbst eine Erkennung für die endgültige Neupositionierung von Scroll Snap hat. Nach meinen wiederholten Untersuchungen und Tests sollte dieses Erkennungsereignis 350 ms betragen (der tatsächliche Vorgang kann einige Millisekunden länger sein), was viel länger ist als 100ms . Daher wird es zu einer fehlerhaften redundanten Beurteilung kommen, die auftritt, bevor die Snap-Positionierung beginnt.

Ich habe darüber nachgedacht und festgestellt, dass dieses Problem unvermeidbar ist, aber es ist kein großes Problem. Es ist nicht möglich, die Erkennungszeit auf 400ms einzustellen. Die Verzögerung ist zu hoch und das Erlebnis ist möglicherweise nicht gut.

4. Aktuelle Methode zur Erkennung von Scroll-Zielelementen

Das Prinzip ist folgendes: Iterieren Sie über alle Listenelemente und ermitteln Sie die Position des linken Rands des Listenelements relativ zum linken Rand des Scroll-Containers (wenn dieser linksbündig ist – scroll-snap-align:left ) oder zur Mitte (zentrierte Ausrichtung) oder zum rechten Rand (rechtsbündig). Wenn die Größe des Listenelements mit der Größe des Bildlaufcontainers übereinstimmt, sind natürlich sowohl die Erkennung des linken, mittleren als auch des rechten Rands akzeptabel.

JS zeigt an:

[].slice.call(container.children).forEach(Funktion (Element, Index) {
    wenn (Math.abs(ele.getBoundingClientRect().left - container.getBoundingClientRect().left) < 10) {
        // Das Element ele ist in diesem Moment das aktuell positionierte Element // ... mit ele kannst du machen was du willst } else {
        // Das Element ele ist in diesem Moment nicht das aktuell positionierte Element}
});

Genau genommen müssten wir berechnen, ob es gleich 0 und nicht kleiner als 10 ist. Hier fügen wir ein Toleranzintervall hinzu.

Nachdem die beiden oben genannten Anforderungen, die JS-Unterstützung erfordern, gelöst wurden, wird der endgültige Effekt erzielt.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.