Je ne sais pas si vous avez rencontré une telle exigence: ajoutez un nouvel élément enfant à un élément dom , puis exigez que si le nouvel élément nouvellement ajouté dépasse la portée du conteneur, nous devons faire défiler automatiquement la position de l'élément enfant nouvellement ajouté, comme indiqué dans la figure suivante:
Ensuite, tout en apprenant certains points de connaissances liés au défilement des éléments dom , nous pouvons réaliser l'effet de l'image ci-dessus et d'autres fonctions liées au défilement.
Propriétés et méthodes DOM qui doivent être comprises
scrollTop est la différence entre la valeur supérieure du contenu de l'élément de conteneur et top de la valeur supérieure à la fenêtre de la viewport supérieure, c'est-à-dire la partie du conteneur qui glisse vers le haut au-delà de la fenêtre de conteneur. L'état de défilement peut être contrôlé en modifiant cette propriété.
clientHeight est l'attribut dom qui décrit la hauteur du conteneur.
scrollHeight est un attribut dom qui décrit la hauteur du contenu du conteneur.
La relation entre les trois attributs est indiquée dans la figure ci-dessous:
getBoundingClientRect ()
Cette méthode est utilisée pour obtenir certaines propriétés géométriques requises pour la disposition des éléments, comme left , right , top , le bottom , height , width , etc.
Srollby (x, y)
La méthode scrollTo dom peut être utilisée pour contrôler directement la distance spécifiée du défilement de la barre de défilement. Cette méthode est plus pratique lorsque vous devez faire défiler vers l'élément spécifié.
srollto (x, y)
La méthode scrollTo dom peut être utilisée pour contrôler directement la barre de défilement pour faire défiler vers la position spécifiée. Cette méthode est plus pratique lors du contrôle de la barre de défilement pour faire défiler en haut ou en bas.
Mettre en œuvre la préparation du contrôle de roulement
Préplions d'abord un html
<! Doctype html> <html> <éad- head> <itle> Explication détaillée des paramètres de barre de scroll </Title> <style> #Scroll_Container {height: 500px; Largeur: 500px; débordement-y: faites défiler; rembourrage: 50px; Dimensionnement en boîte: Border-Box; } .scroll_item {hauteur: 200px; Largeur: 500px; marge: 20px; Color en arrière-plan: Aquamarine; Affichage: flex; Align-Items: Centre; Justification-contenu: centre; } </ style> </ head> <body> <div id = Scroll_Container> <div id = Scroll_Container> <div id = item1 class = scroll_item> <span> 1 </span> </v> <div id = item2 class = scroll_item> <span> 2 </span> </v> <div id = item3 class = scroll_item> id = item4 class = scroll_item> <span> 4 </span> </ div> <div id = item5 class = scroll_item> <span> 5 </span> </div> </div> <bouton onclick = additem ()> Ajouter un élément </futton> </div> </body> <prict> let conteneur = document.getElementyId (Scroll_Container); Soit index = 5; // Ajouter une fonction d'élément addItem () {index + = 1; Selt item = `<div id = $ {'item' + index} class = scroll_item> <span> $ {index} </span> </div>`; contener.innerhtml + = item; setTimeout (() => {scrolltoIndex ();})} </cript> </html>Le code ci-dessus contient une zone de défilement et peut ajouter des éléments à la zone de défilement ou faire défiler à la position de l'élément spécifié. L'effet général est le suivant.
Implémentation de base
Le sens de scrollTop a déjà été expliqué. Nous pouvons contrôler le défilement en modifiant la valeur scrollTop de l'élément de conteneur ScrollTop. Plus la valeur scrollTop est grande, plus la distance de défilement de la barre de défilement est grande par rapport à l'état d'origine (lorsque scrollTop est 0).
Après avoir compris la signification de scrollTop , nous pouvons utiliser scrollTop pour implémenter le contrôle de la barre de défilement. Ensuite, nous implémentons d'abord un défilement vers le bas et ajoutons une méthode scrollToBottom() au code ci-dessus:
fonction scrolltobottom () {let y = contener.scrollHeight-contrainer.clientHeight; contener.scrolltop = y;} Si vous souhaitez faire défiler vers le haut, nous avons juste besoin de définir scrollTop sur 0:
fonction ScrollTotop () {contener.scrolltop = 0;} En combinant getBoundingClientRect() , nous pouvons également facilement implémenter le défilement vers l'élément spécifié, où getBoundingClientRect().top
fonction ScrollToElement (el) {Container.ScrollTop + = el.getBoundingClientRect (). TOP;} Ajouter l'animationFaites défiler vers le bas
Cependant, le défilement du code ci-dessus est trop rigide. Nous pouvons lui ajouter un effet d'animation, qui peut être implémenté à l'aide de setInterval() . Analyser le processus de mise en œuvre des effets d'animation. La mise en œuvre de l'animation n'est rien de plus que de terminer le changement d'une variable dans un certain délai. Par conséquent, nous devons d'abord connaître le décalage de deux variables, la variable ( scrollTop ) et le temps requis pour le changement. Le décalage est la valeur finale de scrollTop moins la valeur d'origine, et la durée de modification est généralement définie sur un paramètre qui peut être modifié. Après avoir compris le processus ci-dessus, prenons d'abord le défilement vers le bas à titre d'exemple:
// Écrivez d'abord une fonction de fonction ScrollToBottom ScrollTobottom (el) {if (! El) {el = conteneur; } // Valeur d'origine LET LETTOP = EL.SCROLLTOP; // La valeur finale let endtop = el.scrollheight-el.clientHeight; // Générer une fonction de contrôle d'animation Soit ScrolLanimationFn = Doanimation (StartTop, Endtop, 300, El); // Exécuter l'animation, exécuter let interval = setInterval (() => {ScrolLanimationFn (interval)}, 10)} / ** * @description: une fonction d'usine qui génère des fonctions de contrôle d'animation (en utilisant les fermetures) * @param {startValue: Variable Valeur d'origine EndValue: Valeur finale Durée: Animation Durée EL: élément qui exécute le scrolling} NULL * / FONCTION DOANIMATION (STARTVALUE, EndValue, Durée, El) {// Utilisez la fermeture pour enregistrer les variables Dy et Step (distance de chaque file d'animation) LET DY = 0; Soit Step = (endValue-StartValue) / (durée / 10); // RETOUR Fonction de contrôle d'animation Return (interval) {dy + = étape; if (dy> = endValue-startValue) {ClearInterval (interval); } el.scrolltop + = étape; }}Modifiez la fonction additionm pour ajouter un défilement à l'animation inférieure:
fonction addItem () {index + = 1; Selt item = `<div id = $ {'item' + index} class = scroll_item> <span> $ {index} </span> </div>`; contener.innerhtml + = item; setTimeout (() => {// scrolltoIndex (); scrolltobottom (conteneur);})}Puis ajoutez un défilement au bouton inférieur pour HTML:
<Button onClick = ScrollToBottom ()> Faites défiler vers le bas </futh>
En suivant la méthode ci-dessus, vous pouvez également implémenter une animation couramment utilisée pour faire défiler vers le haut:
// Écriture d'une fonction ScrollTotop Fonction ScrollTotop (el) {if (! El) {el = conteneur; } // Valeur d'origine LET LETTOP = EL.SCROLLTOP; // la valeur finale let endtop = 0; // Générer une fonction de contrôle d'animation Soit ScrolLanimationFn = Doanimation (StartTop, Endtop, 300, El); // Exécuter l'animation, exécuter let interval = setInterval (() => {ScrolLanimationFn (interval)}, 10)} Afin de nous adapter pour faire défiler le bas, nous devons modifier le moment de l'arrêt d'animation. La fonction doAnimation() modifiée est la suivante:
Fonction Doanimation (startValue, endValue, Durée, El) {// Utilisez la fermeture pour enregistrer les variables Dy et Step (distance de chaque défilement d'animation) Let dy = 0; Soit Step = (endValue-StartValue) / (durée / 10); fonction de retour (interval) {dy + = étape; // Ici, il est modifié pour utiliser la valeur absolue pour juger if (math.abs (dy)> = math.abs (endValue-StartValue)) {ClearInterval (Interval); } el.scrolltop + = étape; }} Enfin, nous ajoutons un défilement au bouton inférieur html :
<Button onClick = ScrollToTOP ()> Faites défiler vers le haut </fontificateur>
L'effet est le suivant:
Ajoutez d'abord les boutons et les boîtes d'entrée requis pour l'élément HTML:
<Type d'entrée = Number Planholder = Veuillez saisir l'élément à faire défiler vers Index Style = Width: 200px; /> <Button OnClick = ScrollToElement ()> Faites défiler vers l'élément spécifié </ftones>
Ajoutez une fonction d'exécution d'animation qui fait défiler l'élément spécifié:
Fonction ScrollToElement (contenerel, el) {if (! Containerel) {// élément parent contenerel = conteneur; } if (! el) {// Demandez à l'élément de faire défiler pour laisser entrer = document.getElementsByTagName ('input') [0]; Selt id = 'item' + input.value; if (! input.value) {id = 'item' + index; } el = document.getElementById (id); } let startTop = Containerel.scrollTop; Soit endtop = startTop + el.getBoundingClientRect (). Top; Laissez ScrollanimationFn = doanimation (startTop, endtop, 300, contenerel); LET Interval = setInterval (() => {ScrollanimationFn (Interval)}, 10)}L'effet est le suivant:
La méthode d'utilisation de scrollTo(x,y) est fondamentalement la même que la méthode d'utilisation de l'attribut scrollTop . scrollTo() de l'élément parent peut contrôler la barre de défilement vers une position spécifiée, ce qui équivaut en fait à la définition de la valeur de scrollTop . Permettez-moi de vous donner un exemple:
// Ici, nous prenons le parchemin de l'axe y comme exemple élément.scrollto (0, y); élément.scrolltop = y; // Les effets des deux phrases ci-dessus sont les mêmes.
Par conséquent, l'utilisation de la méthode scrollTo() pour contrôler la barre de défilement est essentiellement la même que l'utilisation de ScrollTop. Nous avons seulement besoin de simplement modifier doAnimation() , et le code est le suivant:
Fonction Doanimation (startValue, endValue, Durée, El) {// Utilisez la fermeture pour enregistrer les variables Dy et Step (distance de chaque défilement d'animation) Let dy = 0; Soit Step = (endValue-StartValue) / (durée / 10); fonction de retour (interval) {dy + = étape; if (math.abs (dy)> = math.abs (endvalue-startValue)) {ClearInterval (interval); } //el.scrolltop+=step ;//e ligne de code est modifié à el.scrollto suivant (0, el.scrolltop + étape); }} L'effet d'exécution est cohérent avec l'implémentation à l'aide de scrollTop .
Implémentation de base
Nous pouvons également utiliser scrollBy(x,y) pour contrôler la barre de défilement. Comme mentionné ci-dessus, scrollBy() consiste à contrôler la distance spécifiée de la barre de défilement (notez que ce n'est pas la position). Utilisez Scrollby () pour implémenter facilement l'exigence de défilement vers des éléments spécifiés. Le code est le suivant:
Fonction ScrollToElement (Containerel, El) {// Parce que GetBoundingClientRect (). Le haut est la distance entre le haut de l'élément enfant et le haut de l'élément parent, cette valeur est donc le décalage de l'élément enfant par rapport à l'élément parent. Nous passons cette valeur dans Scrollby, c'est-à-dire défiler vers l'élément spécifié contenerel.scrollby (0, el.getBoundingClientRect (). Top);}Faites défiler vers le bas:
fonction scrolltobottom (contenerel) {let dy = contenerel.scrollHeight-containerel.clientHeight; contenerel.scrollby (0, dy);}Faites défiler en haut
fonction ScrollTotop (contenerel) {let dy = - (contenerel.scrollheight-containerel.clientHeight); contenerel.scrollby (0, dy);}Ajouter l'animation
Ici, nous modifions la fonction générée par l'animation, car le paramètre de scrollBy() est ici le décalage de la variable, nous apportons donc les modifications suivantes:
fonction ScrollToBottom (contenerel) {if (! Containerel) {contenerel = conteneur; } // dy est le décalage let dy = contenerel.scrollHeight-Containerel.ClientHeight; Soit ScrollanimationFn = Doanimation (Dy, 300, Containerel); LET Interval = setInterval (() => {ScrollanimationFn (Interval)}, 10)} fonction ScrollToP (Containerel) {if (! Contairerel) {contenerel = conteneur; } // dy est le décalage LET DY = - (Containerel.ScrollHeight-Containerel.ClientHeight); Soit ScrollanimationFn = Doanimation (Dy, 300, Containerel); LET Interval = setInterval (() => {ScrolLanimationFn (Interval)}, 10)} Fonction ScrollToElement (Containerel, el) {if (! Contairerel) {contenerel = contener; } if (! el) {let input = document.getElementsByTagName ('input') [0]; Selt id = 'item' + input.value; if (! input.value) {id = 'item' + index; } el = document.getElementById (id); } // dy est le décalage let dy = el.getBoundingClientRect (). TOP; Soit ScrollanimationFn = Doanimation (Dy, 300, Containerel); LET interval = setInterval (() => {ScrollanimationFn (Interval)}, 10)} / ** * @description: * @param {type} * @return: * / fonction doanimation (dy, durée, el) {// Utiliser la fermeture pour enregistrer des variables telles que l'exe_dy et la distance qui a été l'animation de recrol) exécuté let Step = dy / (durée / 10); function de retour (interval) {exe_dy + = étape; if (math.abs (exe_dy)> = math.abs (dy)) {ClearInterval (interval); } el.scrollby (0, étape); }} L'effet d'exécution est cohérent avec l'implémentation à l'aide de scrollTop .
Ce qui précède: Point_up_2: est votre propre résumé détaillé et explication du contrôle de la barre de défilement DOM, ainsi que certaines méthodes d'utilisation de base.
Ceci est l'article sur l'explication détaillée du résumé du contrôle de la barre de défilement de la barre de défilement de l'élément DOM en HTML. Pour le contenu de défilement de la barre de défilement DOM Element plus pertinent, veuillez rechercher des articles précédents sur Wulin.com ou continuer à parcourir les articles connexes ci-dessous. J'espère que tout le monde soutiendra Wulin.com à l'avenir!