Ich weiß nicht, ob Sie auf eine solche Anforderung gestoßen sind: Fügen Sie einem dom -Element ein neues untergeordnetes Element hinzu und verlangen Sie dann, dass wir, wenn das neu hinzugefügte neue Element den Umfang des Containers überschreitet, automatisch zur Position des neu hinzugefügten untergeordneten Elements scrollen müssen, wie in der folgenden Abbildung gezeigt:
Während wir dann einige Wissenspunkte im Zusammenhang mit dom Element-Scrollen lernen, können wir den Effekt des obigen Bildes und einige andere scrollbezogene Funktionen erkennen.
DOM -Eigenschaften und -Methoden, die verstanden werden müssen, Scrolltop, ClientHeight und ScrollHeight
scrollTop -Attribut ist die Differenz zwischen dem Top -Wert des Containerelementinhalts und top -Wert des Top -Werts am Top viewport , dh dem Teil des Containers, der über das Ansichtsfenster über das Container hinaus nach oben gleitet. Der Bildlaufstatus kann durch Änderung dieser Eigenschaft gesteuert werden.
clientHeight ist das dom -Attribut, das die Höhe des Containers beschreibt.
scrollHeight ist ein dom -Attribut, das die Höhe des Containerinhalts beschreibt.
Die Beziehung zwischen den drei Attributen ist in der folgenden Abbildung dargestellt:
GetBoundingClientRect ()
Diese Methode wird verwendet, um einige geometrische Eigenschaften zu erhalten, die für das Elementlayout erforderlich sind, z. B. left , right , top , bottom , height , width usw.
srollby (x, y)
Die scrollTo -Methode dom -Containers kann verwendet werden, um den angegebenen Abstand des Scrollbar -Scrolls direkt zu steuern. Diese Methode ist bequemer, wenn Sie zum angegebenen Element scrollen müssen.
srollto (x, y)
Die scrollTo -Methode dom -Containers kann verwendet werden, um die Bildlaufleiste direkt zu steuern, um in die angegebene Position zu scrollen. Diese Methode ist bequemer, wenn die Bildlaufleiste so steuern, dass sie nach oben oder unten scrollen.
Implementieren Sie die Vorbereitung der Rolling -Steuerung
Bereiten wir zuerst eine html vor
<! DocType html> <html> <kopf> <titels> Detaillierte Erläuterung der Bildlaufleisteneinstellungen </title> <style> #Scroll_Container {Höhe: 500px; Breite: 500px; Überlauf-y: Scroll; Polsterung: 50px; Kastengrößen: Border-Box; } .scroll_item {Höhe: 200px; Breite: 500px; Rand: 20px; Hintergrundfarbe: Aquamarin; Anzeige: Flex; Ausrichtung: Zentrum; Justify-Content: Center; } </style> </head> <body> <div id=scroll_container> <div id=scroll_container> <div id=item1 class=scroll_item> <span>1</span> </div> <div id=item2 class=scroll_item> <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 ()> add ein Element </button> </div> </body> <Script> let contorer = dokument = dokument. Sei index = 5; // eine Elementfunktion hinzufügen addItem () {index+= 1; Sei item = `<div id = $ {'item'+index} class = scroll_item> <span> $ {index} </span> </div>`; Container.InnerHtml+= Element; setTimeout (() => {scrolltoIndex ();})} </script> </html>Der obige Code enthält einen Bildlaufbereich und kann dem Bildlaufbereich Elemente hinzufügen oder zur angegebenen Elementposition scrollen. Der allgemeine Effekt ist wie folgt.
Grundlegende Implementierung
Die Bedeutung von scrollTop wurde zuvor erklärt. Wir können das Scrollen steuern, indem wir den scrollTop -Wert des Containerelement -Scrolltop ändern. Je größer der scrollTop -Wert ist, desto größer ist der Scroll -Abstand der Bildlaufleiste relativ zum ursprünglichen Zustand (wenn scrollTop 0 ist).
Nach dem Verständnis der Bedeutung von scrollTop können wir scrollTop verwenden, um die Scrollbar -Steuerung zu implementieren. Anschließend implementieren wir zuerst eine Schriftrolle nach unten und fügen dem obigen Code eine scrollToBottom() -Methode hinzu:
Funktion ScrollTobottom () {let y = container.scrollHeight-container.clientHeight; Container.Scrolltop = y;} Wenn Sie nach oben scrollen möchten, müssen wir nur scrollTop auf 0 einstellen:
function ScrollTotop () {Container.Scrolltop = 0;} Durch Kombination getBoundingClientRect() -Methode können wir auch die Scrollen in das angegebene Element implementieren, in dem getBoundingClientRect().top den Abstand vom oberen Rand des untergeordneten Elements bis zur Oberseite des übergeordneten Elements -Ansichtsfenfers darstellt:
Funktion scrolltoelement (el) {container.scrolltop+= el.getBoundingClientRect (). Top;} Animation hinzufügenNach unten scrollen
Das Scrollen des obigen Codes ist jedoch zu steif. Wir können ihm einen Animationseffekt hinzufügen, der mit Hilfe von setInterval() implementiert werden kann. Analysieren Sie den Prozess der Implementierung von Animationseffekten. Die Implementierung der Animation ist nichts weiter als die Änderung einer Variablen innerhalb eines bestimmten Zeitraums abzuschließen. Daher müssen wir zunächst den Versatz von zwei Variablen kennen, die Variable ( scrollTop ) und die für die Änderung erforderliche Zeit. Der Offset ist der Endwert von scrollTop abzüglich des ursprünglichen Wertes, und die Änderungsdauer wird im Allgemeinen auf einen Parameter eingestellt, der geändert werden kann. Nehmen wir nach dem Verständnis des obigen Vorgangs zunächst das Scrollen nach unten als Beispiel:
// Schreiben Sie zuerst eine ScrollTobottom -Funktionsfunktion ScrollTobottom (el) {if (! El) {el = container; } // Originalwert let startTop = el.scrolltop; // Der endgültige Wert let endTop = el.scrollHeight-el.clientHeight; // eine Animation Control -Funktion erzeugen lassen, lass Scrollanimationfn = doanimation (Starttop, Endtop, 300, el); // Animation ausführen, let let Interal = setInterval (() => {scrollanimationfn (Intervall)}, 10)}/** * @Description: Eine Fabrikfunktion, die Animationssteuerungsfunktionen generiert (mithilfe von Verschlusssachen) * @param {startValue: Variable Original -Wertendrehung: Varable -Animation: Varable -Animation: Animierungsdauer: Animierungsdauer | null */function doanimation (startValue, EndValue, Dauer, el) {// Verschluss verwenden, um Variablen dy und Schritt zu speichern (Entfernung jeder Animations -Scrolling) Sei Dy = 0; Sei Step = (EndValue-StartValue)/(Dauer/10); // Animation Control Function Function Function Function (Intervall) {dy+= Schritt; if (dy> = endValue-startValue) {ClearInterval (Intervall); } El.Scrolltop+= Schritt; }}Ändern Sie die AddItem -Funktion, um die untere Animation zu scrollen zu lassen:
Funktion addItem () {index+= 1; Sei item = `<div id = $ {'item'+index} class = scroll_item> <span> $ {index} </span> </div>`; Container.InnerHtml+= Element; setTimeout (() => {// scrolltoIndex (); scrollTobottom (Container);})}Fügen Sie dann eine Schriftrolle zur unteren Taste für HTML hinzu:
<button onclick = scrolltobottom ()> nach unten scrollen </button>
Nach der obigen Methode können Sie auch eine häufig verwendete Animation implementieren, um nach oben zu scrollen:
// Schreiben einer ScrollTotop -Funktion Funktion Scrolltotop (el) {if (! El) {el = container; } // Originalwert let startTop = el.scrolltop; // Der endgültige Wert let endTop = 0; // eine Animation Control -Funktion erzeugen lassen, lass Scrollanimationfn = doanimation (Starttop, Endtop, 300, el); // Animation ausführen, let let inval = setInterval (() => {scrollanimationfn (intervall)}, 10)} ausführen Um sich nach unten zu scrollen, müssen wir den Zeitpunkt des Animationsstopps ändern. Die modifizierte Funktion doAnimation() lautet wie folgt:
Funktion Doanimation (StartValue, Endwert, Dauer, El) {// Verschluss verwenden, um die Variablen dy und Schritt zu speichern (Entfernung jeder Animations -Scrolling) Sei Dy = 0; Sei Step = (EndValue-StartValue)/(Dauer/10); Rückgabefunktion (Intervall) {dy+= Schritt; // Hier wird es geändert, um den absoluten Wert zu verwenden, um zu beurteilen, ob (math.abs (dy)> = math.abs (EndValue-startValue)) {ClearInterval (Intervall); } El.Scrolltop+= Schritt; }} Schließlich fügen wir html eine Schriftrolle zur unteren Taste hinzu:
<button onclick = scrolltotop ()> scrollen Sie nach oben </button>
Der Effekt ist wie folgt:
Fügen Sie zunächst die erforderlichen Tasten und Eingangsfelder für das HTML -Element hinzu:
<Eingabetyp = Nummer platzhalter = Bitte geben Sie das zu scresste Element in den Indexstil = Breite: 200px;/> <Taste Onclick = ScrollToELement ()> zum angegebenen Element </Taste> ein.
Fügen Sie eine Animationsausführungsfunktion hinzu, die das angegebene Element scrolliert:
Funktion ScrolltoELement (Container, el) {if (! contatore) {// übergeordnetes Element contatorel = container; } if (! el) {// Lassen Sie das Element scrolliert werden, um input = document.getElementsByTagName ('Eingabe') [0]; sei id = 'item'+input.value; if (! input.Value) {id = 'item'+index; } el = document.getElementById (id); } let startTop = container.scrolltop; Sei endtop = startTop+el.getBoundingClientRect (). Top; Scrollanimationfn = doanimation (Starttop, Endtop, 300, Containel); Sei inval = setInterval (() => {scrollanimationfn (Intervall)}, 10)}Der Effekt ist wie folgt:
Die Nutzungsmethode von scrollTo(x,y) entspricht im Grunde genommen der Nutzungsmethode des scrollTop -Attributs. scrollTo() -Methode des übergeordneten Elements kann die Bildlaufleiste an eine bestimmte Position steuern, die tatsächlich gleichbedeutend mit dem Einstellen des Werts von scrollTop ist. Lassen Sie mich Ihnen ein Beispiel geben:
// Hier nehmen wir die Y-Achse-Schriftrolle als Beispielelement.
Daher ist die Verwendung von scrollTo() -Methoden zur Steuerung der Bildlaufleiste im Grunde genommen derselbe wie die Verwendung von Scrolltop. Wir müssen nur einfach doAnimation() ändern, und der Code lautet wie folgt:
Funktion Doanimation (StartValue, Endwert, Dauer, El) {// Verschluss verwenden, um die Variablen dy und Schritt zu speichern (Entfernung jeder Animations -Scrolling) Sei Dy = 0; Sei Step = (EndValue-StartValue)/(Dauer/10); Rückgabefunktion (Intervall) {dy+= Schritt; if (math.abs (dy)> = math.abs (EndValue-startValue)) {ClearInterval (Intervall); } //el.scrolltop+=step;//this Code -Zeile wird an die folgenden El.Scrollto (0, El.Scrolltop+Schritt) geändert; }} Der Ausführungseffekt stimmt mit der Implementierung mithilfe von scrollTop überein.
Grundlegende Implementierung
Wir können auch scrollBy(x,y) verwenden, um die Bildlaufleiste zu steuern. Wie oben erwähnt, besteht scrollBy() darin, den angegebenen Abstand der Scrollbar zu steuern (beachten Sie, dass es sich nicht um die Position handelt). Verwenden Sie Scrollby (), um die Schriftzuferanforderung für bestimmte Elemente einfach zu implementieren. Der Code ist wie folgt:
Funktion ScrolltoELement (Contatorel, El) {//, weil GetBoundingClientRect () die Entfernung von der Oberseite des untergeordneten Elements bis zur Oberseite des übergeordneten Elements ist. Dieser Wert ist also der Versatz des untergeordneten Elements relativ zum übergeordneten Element. Wir übergeben diesen Wert in Scrollby, dh scrollen Sie zum angegebenen Element -Contator.Scrollen Sie nach unten:
Funktion scrolltobottom (contatore) {let dy = container.scrollHeight-containerel.clientHeight; Container.Scrollby (0, DY);}Scrollen Sie nach oben
function ScrollTotop (Container) {let dy =-(contatore.scrollHeight-containerel.clientHeight); Container.Scrollby (0, DY);}Animation hinzufügen
Hier ändern wir die von der Animation generierte Funktion, da der Parameter von scrollBy() hier der Versatz der Variablen ist, sodass wir die folgenden Änderungen vornehmen:
Funktion scrolltobottom (contatore) {if (! contatore) {contatorel = container; } // dy ist der offset let dy = container.scrollHeight-containerel.clientHeight; ScrollanimationFn = Doanimation (DY, 300, Containel); Sei inval = setInterval (() => {scrollanimationFn (intervall)}, 10)} Funktion scrolltotop (contatore) {if (! containerel) {contatorel = container; } // dy ist der offset let dy =-(contatore.scrollHeight-containerel.clientHeight); ScrollanimationFn = Doanimation (DY, 300, Containel); Sei Interal = setInterval (() => {scrollanimationFn (intervall)}, 10)} Funktion ScrolltoELement (Contator, el) {if (! contatore) {containerel = container; } if (! el) {let input = document.getElementsByTagName ('input') [0]; sei id = 'item'+input.value; if (! input.Value) {id = 'item'+index; } el = document.getElementById (id); } // dy ist der offset let dy = el.getBoundingClientRect (). Top; ScrollanimationFn = Doanimation (DY, 300, Containel); Sei inval = setInterval (() => {scrollanimationFn (intervall)}, 10)}/** * @Description: * @param {type} * @return: */function doanimation (dy, duration, el) {// Verschluss verwendete, um Variablen wie EXE_DY und STREPT (FILDE DISTICTE DISTICTS DESTEGEN) zu speichern. ausgeführt LET STEP = DY/(Dauer/10); Rückgabefunktion (Intervall) {exe_dy+= Schritt; if (math.abs (exe_dy)> = math.abs (dy)) {ClearInterval (Intervall); } El.Scrollby (0, Schritt); }} Der Ausführungseffekt stimmt mit der Implementierung mithilfe von scrollTop überein.
Das obige: point_up_2: Ist Ihre eigene detaillierte Zusammenfassung und Erläuterung der DOM -Scroll -Balkskontrolle sowie einige grundlegende Verwendungsmethoden.
Dies ist der Artikel über die detaillierte Erläuterung des DOM -Element -Scroll -Stange -Scroll -Steuerungszusammenfassung in HTML. Weitere relevante DOM -Elemente -Scroll -Bar -Scroll -Inhalte finden Sie in früheren Artikeln von Wulin.com oder stöbern Sie weiter nach unten zu verwandten Artikeln. Ich hoffe, jeder wird Wulin.com in Zukunft unterstützen!