Detaillierte Erklärung der Bildlaufleisten-Bildlaufsteuerung von DOM-Elementen in HTML

Ich weiß nicht, ob Sie schon einmal auf eine solche Anforderung gestoßen sind: Dem dom Element wird ein neues untergeordnetes Element hinzugefügt und dann wird gefordert, dass, wenn das neu hinzugefügte Element den Umfang des Containers überschreitet, automatisch an die Position des neu hinzugefügten untergeordneten Elements gescrollt werden muss, wie in der folgenden Abbildung dargestellt:

Als Nächstes lernen wir einige Wissenspunkte im Zusammenhang mit dem Scrollen von dom -Elementen, während wir den im obigen Bild gezeigten Effekt und einige andere scrollbezogene Funktionen realisieren.

DOM-Eigenschaften und -Methoden, die verstanden werden müssen: scrollTop, clientHeight und scrollHeight

scrollTop -Attribut ist ein Wert, der die Differenz zwischen dem oberen Wert des Containerelementinhalts und top Wert des Containerelements ( viewport ) beschreibt, also den Teil des Containers, der über das Containeransichtsfenster hinausragt, nachdem der Inhalt im Container nach oben gerutscht ist. Sie können den Bildlaufstatus steuern, indem Sie diese Eigenschaft ändern.

clientHeight ist eine dom Eigenschaft, die die Höhe des Containers beschreibt.

scrollHeight ist eine dom Eigenschaft, die die Höhe des Containerinhalts beschreibt.

Die Beziehung zwischen den drei Attributen wird in der folgenden Abbildung dargestellt:

getBoundingClientRect()

Mit dieser Methode werden einige für das Elementlayout erforderliche geometrische Eigenschaften abgerufen, z. B. left , right , top , bottom , height , width usw.

scrollBy(x,y)

Mit der scrollTo Methode dom Containers kann die Bildlaufleiste direkt gesteuert werden, um über eine bestimmte Distanz zu scrollen. Diese Methode ist praktisch, wenn Sie zu einem bestimmten Element scrollen müssen.

scrollenZu(x,y)

Mit der scrollTo Methode dom Containers kann die Bildlaufleiste direkt gesteuert werden, um zur angegebenen Position zu scrollen. Diese Methode eignet sich gut zum Steuern der Bildlaufleiste zum Scrollen nach oben oder unten.

Implementieren der rollierenden Kontrollvorbereitung

Lassen Sie uns zuerst ein html vorbereiten

<!DOCTYPE html>
<html>
    <Kopf>
       <title>Detaillierte Erklärung der Bildlaufleisteneinstellungen</title>
       <Stil>
          #scroll_container{
              Höhe: 500px;
              Breite: 500px;
              Überlauf-y: scrollen;
              Polsterung: 50px;
              Box-Größe: Rahmenbox;
          }
          .scroll_item{
              Höhe: 200px;
              Breite: 500px;
              Rand oben: 20px;
              Hintergrundfarbe: Aquamarin;
              Anzeige: Flex;
              Elemente ausrichten: zentrieren;
              Inhalt ausrichten: zentriert;
          }
       </Stil>
    </Kopf>
    <Text>
       <div id="Scrollcontainer">
           <div id="Scrollcontainer">
               <div id="Element1" Klasse="Scrollelement">
                   <span>1</span>
               </div>
               <div id="Element2" Klasse="Scrollelement">
                    <span>2</span>
                </div>
                <div id="item3" class="scroll_item">
                    <span>3</span>
                </div>
                <div id="item4" class="scroll_item">
                    <span>4</span>
                </div>
                <div id="item5" class="scroll_item">
                    <span>5</span>
                </div> 
           </div>
           <button onclick="addItem()">Ein Element hinzufügen</button>
       </div>
    </body>
    <Skript>
        let container = document.getElementById("scroll_container");
        lass Index=5;
        //Elementfunktion hinzufügen addItem(){
            Index+=1;
            let item=`<div id="${'item'+index}" class="scroll_item">
                            <span>${index}</span>
                        </div>`;
            Container.innerHTML+=Element;  
            setzeTimeout(()=>{
                scrollToIndex();
            })
         }
    </Skript>
</html>

Der obige Code enthält einen scrollbaren Bereich. Sie können dem Scrollbereich Elemente hinzufügen oder zur angegebenen Elementposition scrollen. Der allgemeine Effekt ist wie in der folgenden Abbildung dargestellt.

Verwenden Sie scrollTop, um Folgendes zu erreichen

Grundlegende Implementierung

Die Bedeutung von scrollTop wurde bereits erklärt. Wir können das Scrollen der Bildlaufleiste steuern, indem wir den scrollTop -Wert des Containerelements ändern. Je größer der scrollTop -Wert, desto größer ist die Bildlaufdistanz der Bildlaufleiste im Verhältnis zu ihrem ursprünglichen Zustand (wenn scrollTop 0 ist).

Wenn wir die Bedeutung von scrollTop kennen, können wir scrollTop verwenden, um die Bildlaufleiste zu steuern. Dann implementieren wir zuerst eine Scroll-nach-unten-Implementierung und fügen dem obigen Code eine scrollToBottom() -Methode hinzu:

Funktion scrollToBottom(){
    lass y = container.scrollHeight - container.clientHeight;
    container.scrollTop=y;
}

Wenn wir entsprechend nach oben scrollen möchten, müssen wir nur scrollTop auf 0 setzen:

Funktion scrollToTop(){
    Container.ScrollTop=0;
}

In Kombination mit der Methode getBoundingClientRect() können wir auch einfach zum angegebenen Element scrollen, wobei getBoundingClientRect().top den Abstand zwischen der Oberseite des untergeordneten Elements und der Oberseite des Ansichtsfensters des übergeordneten Elements darstellt:

Funktion scrollToElement(el){
     container.scrollTop+=el.getBoundingClientRect().top;
}

Animation hinzufügen

Nach unten scrollen

Allerdings ist das Scrollen im obigen Code zu steif. Wir können ihm einen Animationseffekt hinzufügen, was mit Hilfe von setInterval() erreicht werden kann. Lassen Sie uns den Prozess der Realisierung des Animationseffekts analysieren. Die Realisierung einer Animation ist nichts anderes als die vollständige Änderung einer Variablen innerhalb eines bestimmten Zeitraums. Daher müssen wir zunächst zwei Variablen kennen, den Offset der Variablen ( scrollTop ) und die für die Änderung erforderliche Zeit. Der Offset ist der Endwert von scrollTop abzüglich des ursprünglichen Werts, und die Änderungsdauer wird im Allgemeinen als veränderbarer Parameter festgelegt. Um den obigen Vorgang zu verstehen, betrachten wir als Beispiel das Scrollen nach unten:

//Schreiben Sie zuerst eine scrollToBottom-Funktion function scrollToBottom(el){
              wenn(!el){
                  el=Behälter;
              }
              //Ursprünglicher Wert let startTop=el.scrollTop;
              //Endgültiger Wert let endTop=el.scrollHeight-el.clientHeight;
              //Eine Animationssteuerungsfunktion generieren let scrollAnimationFn=doAnimation(startTop,endTop,300,el);
              //Führe die Animation alle 10 ms aus let interval=setInterval(()=>{
                scrollAnimationFn(Intervall)
              },10)
 }
/**
 * @description: Eine Factory-Funktion, die Animationssteuerungsfunktionen generiert (mithilfe von Closures).
 * @param {
    startValue: ursprünglicher Wert der Variable endValue: endgültiger Wert der Variable duration: Dauer der Animation el: Element, das die Scroll-Animation ausführt} 
 * @return: null
 */
Funktion doAnimation(Startwert,Endwert,Dauer,el){
              //Verwenden Sie Closure, um die Variablen dy und step (die Distanz, über die jede Animation scrollt) zu speichern.
              sei dy=0;
              let Schritt=(Endwert-Startwert)/(Dauer/10);
              //Gibt die Animationssteuerungsfunktion zurück return function(interval){
                  dy+=Schritt;
                  wenn(dy>=EndeWert-StartWert){
                      clearInterval(Intervall);
                  }
                  el.scrollTop+=Schritt;
              }
 }

Ändern Sie die Funktion „addItem“, um unten eine Scroll-Animation hinzuzufügen:

Funktion addItem(){
            Index+=1;
            let item=`<div id="${'item'+index}" class="scroll_item">
                            <span>${index}</span>
                        </div>`;
            Container.innerHTML+=Element;  
            setzeTimeout(()=>{
                // scrollToIndex();
                scrollToBottom(Container);
            })
           
 }

Fügen Sie dann unten im HTML eine Bildlaufschaltfläche hinzu:

<button onclick="scrollToBottom()">Nach unten scrollen</button>

Nach oben scrollen

Nach der obigen Methode können Sie auch eine allgemeine Animation zum Scrollen nach oben implementieren:

//Schreibe eine scrollToTop-Funktion function scrollToTop(el){
              wenn(!el){
                  el=Behälter;
              }
              //Ursprünglicher Wert let startTop=el.scrollTop;
              //Endwert let endTop=0;
              //Eine Animationssteuerungsfunktion generieren let scrollAnimationFn=doAnimation(startTop,endTop,300,el);
              //Führe die Animation alle 10 ms aus let interval=setInterval(()=>{
                scrollAnimationFn(Intervall)
              },10)
 }

Um das Scrollen nach unten anzupassen, müssen wir den Zeitpunkt des Animationsstopps ändern. Die geänderte Funktion doAnimation() lautet wie folgt:

Funktion doAnimation(Startwert,Endwert,Dauer,el){
              //Verwenden Sie Closure, um die Variablen dy und step (die Distanz, über die jede Animation scrollt) zu speichern.
              sei dy=0;
              let Schritt=(Endwert-Startwert)/(Dauer/10);
              Rückgabefunktion (Intervall) {
                  dy+=Schritt;
                  //Ändern, um hier die Absolutwertbeurteilung zu verwenden if(Math.abs(dy)>=Math.abs(endValue-startValue)){
                      clearInterval(Intervall);
                  }
                  el.scrollTop+=Schritt;
              }
 }

Zum Schluss fügen wir html eine Schaltfläche zum Scrollen nach unten hinzu:

<button onclick="scrollToTop()">Nach oben scrollen</button>

Die Wirkung ist wie folgt:

Zum angegebenen Element blättern

Fügen Sie zunächst die erforderlichen Schaltflächen und Eingabefelder zum HTML-Element hinzu:

<input type="number" placeholder="Bitte geben Sie den Elementindex ein, zu dem gescrollt werden soll" style="width: 200px;"/>
<button onclick="scrollToElement()">Zum angegebenen Element scrollen</button>

Fügen Sie eine Funktion zur Ausführung einer Animation hinzu, um das angegebene Element zu scrollen:

Funktion scrollToElement(ContainerEl,el){
            wenn(!containerEl){
                //Übergeordnetes Element containerEl=container;
            }
            wenn(!el){
                //Das Element zum Scrollen bringen let input=document.getElementsByTagName('input')[0];
                Lassen Sie id='Artikel'+Eingabewert;
                wenn(!Eingabe.Wert){
                    id='Artikel'+Index;
                }
                el=document.getElementById(id);
            }
            let startTop=containerEl.scrollTop;
            let endTop=startTop+el.getBoundingClientRect().top;
            let scrollAnimationFn=doAnimation(startTop,endTop,300,containerEl);
            lass Intervall = setzeIntervall(()=>{
                scrollAnimationFn(Intervall)
            },10)
}

Die Wirkung ist wie folgt:

Verwenden von scrollTo()

Die Verwendung von scrollTo(x,y) ist grundsätzlich dieselbe wie die scrollTop -Attributs. scrollTo() Methode des übergeordneten Elements kann die Bildlaufleiste so steuern, dass sie zur angegebenen Position scrollt, was eigentlich dem Festlegen des Werts von scrollTop entspricht. Lassen Sie mich Ihnen ein Beispiel geben:

//Hier nehmen wir das Scrollen entlang der Y-Achse als Beispiel element.scrollTo(0,y);
element.scrollTop=y;
//Die beiden obigen Sätze haben die gleiche Wirkung.

Daher ist die Verwendung scrollTo() -Methode zur Steuerung der Bildlaufleiste im Grunde dasselbe wie die Verwendung von scrollTop. Wir müssen lediglich doAnimation() ändern. Der Code lautet wie folgt:

Funktion doAnimation(Startwert,Endwert,Dauer,el){
              //Verwenden Sie Closure, um die Variablen dy und step (die Distanz, über die jede Animation scrollt) zu speichern.
              sei dy=0;
              let Schritt=(Endwert-Startwert)/(Dauer/10);
              Rückgabefunktion (Intervall) {
                  dy+=Schritt;
                  wenn (Math.abs(dy)>=Math.abs(Endwert-Startwert)){
                      clearInterval(Intervall);
                  }
                  //el.scrollTop+=step; //Diese Codezeile wird wie folgt geändert el.scrollTo(0,el.scrollTop+step);
              }
}

Der Ausführungseffekt ist der gleiche wie bei Verwendung scrollTop .

Verwenden von scrollBy()

Grundlegende Implementierung

Wir können auch scrollBy(x,y) verwenden, um die Bildlaufleiste zu steuern. Wie oben erwähnt, steuert scrollBy() die Bildlaufleiste, um eine bestimmte Distanz zu scrollen (beachten Sie, dass es sich nicht um die Position handelt). Mit scrollBy() können Sie ganz einfach zum angegebenen Element scrollen. Der Code lautet wie folgt:

Funktion scrollToElement(ContainerEl,el){
    // Da getBoundingClientRect ().top der Abstand zwischen der Oberseite des untergeordneten Elements und der Oberseite des übergeordneten Elements ist, stellt dieser Wert den Versatz des untergeordneten Elements relativ zum übergeordneten Element dar. Wir übergeben diesen Wert an scrollBy, dh scrollen zum angegebenen Element containerEl.scrollBy (0, el.getBoundingClientRect ().top);
}

Scrollen Sie nach unten:

Funktion scrollToBottom(ContainerEl){
    let dy=containerEl.scrollHeight-containerEl.clientHeight;
    containerEl.scrollBy(0,dy);
}

Nach oben scrollen

Funktion scrollToTop(ContainerEl){
    let dy = -(containerEl.scrollHeight - containerEl.clientHeight);
    containerEl.scrollBy(0,dy);
}

Animation hinzufügen

Hier ändern wir die Funktion zur Animationsgenerierung, da der Parameter unseres scrollBy() der Offset der Variablen ist. Nehmen Sie daher die folgenden Änderungen vor:

Funktion scrollToBottom(ContainerEl){
              wenn(!containerEl){
                BehälterEl=Behälter;
              }
              //dy ist der Offset let dy=containerEl.scrollHeight-containerEl.clientHeight;
              let scrollAnimationFn=doAnimation(dy,300,containerEl);
              lass Intervall = setzeIntervall(()=>{
                scrollAnimationFn(Intervall)
              },10)
         }
         Funktion scrollToTop(ContainerEl){
              wenn(!containerEl){
                BehälterEl=Behälter;
              }
              //dy ist der Versatz let dy=-(containerEl.scrollHeight-containerEl.clientHeight);
              let scrollAnimationFn=doAnimation(dy,300,containerEl);
              lass Intervall = setzeIntervall(()=>{
                scrollAnimationFn(Intervall)
              },10)
         }
         Funktion scrollToElement(ContainerEl,el){
            wenn(!containerEl){
                BehälterEl=Behälter;
            }
            wenn(!el){
                Geben Sie die Eingabe ein, um das Dokument zu formatieren.
                Lassen Sie id='Artikel'+Eingabewert;
                wenn(!Eingabe.Wert){
                    id='Artikel'+Index;
                }
                el=document.getElementById(id);
            }
           //dy ist der Offset let dy=el.getBoundingClientRect().top;
            let scrollAnimationFn = doAnimation(dy, 300, containerEl);
            lass Intervall = setzeIntervall(()=>{
                scrollAnimationFn(Intervall)
            },10)
         }
         /**
          * @Beschreibung: 
          * @param {Typ} 
          * @zurückkehren: 
          */
         Funktion doAnimation(dy,Dauer,el){
              //Verwenden Sie Closure, um Variablen wie exe_dy und step (die Distanz, über die jede Animation scrollt) zu speichern.
              let exe_dy=0; //Offset bereits ausgeführt let step=dy/(duration/10);
              Rückgabefunktion (Intervall) {
                  exe_dy+=Schritt;
                  wenn (Math.abs(exe_dy)>=Math.abs(dy)){
                      clearInterval(Intervall);
                  }
                  el.scrollBy(0,Schritt);
              }
         }

Der Ausführungseffekt ist der gleiche wie bei Verwendung scrollTop .

endlich

Das oben genannte: point_up_2: ist meine detaillierte Zusammenfassung und Erklärung der DOM-Bildlaufleistensteuerung sowie einiger grundlegender Verwendungsmethoden.

Damit ist dieser Artikel mit der detaillierten Zusammenfassung der Bildlaufsteuerung von DOM-Element-Bildlaufleisten in HTML abgeschlossen. Weitere relevante Inhalte zu Bildlaufleisten von DOM-Elementen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: Mit CSS3 implementierte Schaltfläche zum Hovern von Bildern

>>: Detaillierte Erläuterung zum Erstellen und Aufrufen von gespeicherten MySQL-Prozeduren

Detaillierte Erklärung der Bildlaufleisten-Bildlaufsteuerung von DOM-Elementen in HTML

CSS verwendet die BEM-Namenskonvention

HTML-Tags dl, dt, dd zum Erstellen einer Tabelle vs. Tabellenerstellungstabelle

9 praktische CSS-Eigenschaften, die Web-Frontend-Entwickler kennen müssen

Eine einfache Methode zum regelmäßigen Löschen abgelaufener Datensätze in MySQL

Zusammenfassung des fragmentierten Wissens zum Docker-Management

Tutorial zum Bereitstellen von nginx+uwsgi in Django-Projekten unter Centos8

Empfehlen Sie einen coolen blinkenden Alarmknopf

Tutorial zur Installation der dekomprimierten Version von MySQL 5.7.18 unter Windows

Implementierungsschritte für die Paketierung und Optimierung von Vue-Projekten

Beispiel für die Erstellung eines halbtransparenten Hintergrundbilds und undurchsichtigen Inhalts in CSS3

Artikel empfehlen

Beispiele für JavaScript-Operationselemente

SQL-Implementierung LeetCode (185. Top drei der höchsten Gehälter in der Abteilung)

So geben Sie Speicherplatz unter CentOS 6 oder CentOS 7 frei

So aktivieren oder deaktivieren Sie Linux-Dienste mit den Befehlen chkconfig und systemctl

Beispiel für die Verwendung eines negativen Rands zum Erreichen eines durchschnittlichen Layouts in CSS

Vue implementiert Drag-Fortschrittsbalken

Tutorial zur Installation und Konfiguration von MySQL Workbench unter CentOS

So verwalten Sie Benutzer und Gruppen beim Ausführen von Docker

CentOS 7 - Lösungsprozessdiagramm für vergessene Passwörter

So implementieren Sie das Abfangen von URIs im Nginx-Standort

Kopieren und Einfügen ist der Feind der Verpackung

Bei der kostenlosen Installationsversion von MySQL 5.7.19 sind Fallstricke aufgetreten (Sammlung)

Memcached-Methode zum Erstellen eines Cache-Servers

Zusammenfassung der CSS-Schwebeelementanalyse

So migrieren Sie SQLite zu einem MySQL-Skript