No sé si ha encontrado tal requisito: agregue un nuevo elemento infantil a un elemento dom y luego requiera que si el nuevo elemento recién agregado excede el alcance del contenedor, necesitamos desplazarse automáticamente a la posición del elemento infantil recién agregado, como se muestra en la siguiente figura:
Luego, mientras aprendemos algunos puntos de conocimiento relacionados con el desplazamiento del elemento dom , podemos darnos cuenta del efecto de la imagen anterior y algunas otras funciones relacionadas con el desplazamiento.
Propiedades y métodos de DOM que deben entenderse Scrolltop, Clientheight y Scrollheight
scrollTop es la diferencia entre el valor superior del contenido del elemento del contenedor y top del valor superior en la ventana gráfica superior de la ventana viewport , es decir, la parte del contenedor que se desliza hacia arriba más allá de la vista de contenedor. El estado de desplazamiento se puede controlar modificando esta propiedad.
clientHeight es el atributo dom que describe la altura del contenedor.
scrollHeight es un atributo dom que describe la altura del contenido del contenedor.
La relación entre los tres atributos se muestra en la figura a continuación:
getBoundingClientRect ()
Este método se utiliza para obtener algunas propiedades geométricas necesarias para el diseño de elementos, como left , right , top , bottom , height , width , etc.
srollby (x, y)
El método scrollTo del contenedor dom se puede utilizar para controlar directamente la distancia especificada del desplazamiento de la barra de desplazamiento. Este método es más conveniente cuando necesita desplazarse al elemento especificado.
srollto (x, y)
El método scrollTo del contenedor dom se puede utilizar para controlar directamente la barra de desplazamiento para desplazarse a la posición especificada. Este método es más conveniente al controlar la barra de desplazamiento para desplazarse hacia la parte superior o inferior.
Implementar la preparación de control de rodaje
Preparemos primero un html
<! Doctype html> <html> <fead> <title> Explicación detallada de la configuración de barra de desplazamiento </title> <style> #scroll_container {altura: 500px; Ancho: 500px; Overflow-y: desplazarse; relleno: 50px; dimensionamiento de la caja: border-box; } .scroll_item {altura: 200px; Ancho: 500px; margen-top: 20px; Color de fondo: aguamarina; Pantalla: Flex; Alineación de ítems: Centro; Justify-Content: Center; } </style> </head> <body> <div id = scroll_container> <div id = scroll_container> <div id = item1 class = scroll_item> <span> 1 </ban> </div> <divid = item2 class = scroll_item> <span> 2 </div> <div> <div It = item3 class = scroll_item> </span </div span id = item4 class = scroll_item> <span> 4 </span> </div> <div id = item5 class = scroll_item> <span> 5 </span> </div> </div> <button onClick = addItem ()> Agregar un elemento </botón> </div> </body> <script> dejar contenedor = document.getElementByid (scroll_container); Sea índice = 5; // Agregar una función de elemento addItem () {index+= 1; Letem = `<div id = $ {'item'+index} class = scroll_item> <span> $ {index} </span> </div>`; contenedor.innerhtml+= elemento; setTimeOut (() => {scrollToIndex ();})} </script> </html>El código anterior contiene un área desplazable y puede agregar elementos al área de desplazamiento o desplazarse a la posición del elemento especificada. El efecto general es el siguiente.
Implementación básica
El significado de scrollTop ha sido explicado antes. Podemos controlar el desplazamiento modificando el valor scrollTop del elemento contenedor ScrollTop. Cuanto mayor sea el valor scrollTop , mayor será la distancia de desplazamiento de la barra de desplazamiento en relación con el estado original (cuando scrollTop es 0).
Después de comprender el significado de scrollTop , podemos usar scrollTop para implementar el control de ScrollBar. Luego implementamos primero un desplazamiento en la parte inferior y agregamos un método scrollToBottom() al código anterior:
function scrollToBottom () {Let y = Container.scrollheight-container.clientHeight; Container.scrolltop = y;} Si desea desplazarse a la parte superior, solo necesitamos establecer scrollTop en 0:
function scrollTotop () {Container.scrolltop = 0;} Combinando getBoundingClientRect() , también podemos implementar fácilmente desplazamiento al elemento especificado, donde getBoundingClientRect().top representa la distancia desde la parte superior del elemento secundario hasta la parte superior de la vista de la vista del elemento principal:
function scrollToElement (El) {Container.scrolltop+= el.getBoundingClientRect (). Top;} Agregar animaciónDesplazarse hasta el fondo
Sin embargo, el desplazamiento del código anterior es demasiado rígido. Podemos agregarle un efecto de animación, que se puede implementar con la ayuda de setInterval() . Analice el proceso de implementación de efectos de animación. La implementación de la animación no es más que completar el cambio de una variable dentro de un cierto período de tiempo. Por lo tanto, primero necesitamos conocer el desplazamiento de dos variables, la variable ( scrollTop ) y el tiempo requerido para el cambio. El desplazamiento es el valor final de scrollTop menos el valor original, y la duración del cambio generalmente se establece en un parámetro que puede modificarse. Después de comprender el proceso anterior, primero tomemos desplazándonos al fondo como ejemplo:
// Primero escriba una función ScrollTobottom ScrollTobottom (El) {if (! El) {El = Container; } // valor original deja inicio = el.scrolltop; // El valor final de Let EndTop = El.Scrollheight-El.ClientHeight; // Generar una función de control de animación deja scrollanimationfn = doanimation (starttop, endtop, 300, el); // ejecutar animation, ejecutar inter interval = setInterval (() => {scrollanimationFn (interval)}, 10)}/** * @Description: una función de fábrica que genera funciones de control de animación (usando cierres) * @param {startValue: Value original variable endValue: Valor de animación de animación Duración Duración EL: Elemento Ejecutivo Ejecutivo Ejecutación {inicio nulo */function doanimation (startValue, endvalue, duración, el) {// use el cierre para guardar las variables dy y paso (distancia de cada desplazamiento de animación) dejar dy = 0; Let Step = (EndValue-startValue)/(duración/10); // return de la función de retorno de la función de control de animación (intervalo) {dy+= step; if (dy> = endValue-startValue) {ClearInterval (intervalo); } el.scrolltop+= step; }}Modifique la función AddItem para agregar desplazamiento a la animación inferior:
función addItem () {index+= 1; Let item = `<div id = $ {'item'+index} class = scroll_item> <span> $ {index} </span> </div>`; contenedor.innerhtml+= elemento; setTimeOut (() => {// scrollToIndex (); scrollTobottom (contenedor);})}Luego agregue un desplazamiento al botón inferior para HTML:
<Button onClick = scrollTobottom ()> desplazarse hacia la parte inferior </boton>
Siguiendo el método anterior, también puede implementar una animación comúnmente utilizada para desplazarse a la parte superior:
// Escribir una función ScrollTotop Función ScrollTotop (El) {if (! El) {El = Container; } // valor original deja inicio = el.scrolltop; // El valor final deja endTop = 0; // Generar una función de control de animación deja scrollanimationfn = doanimation (starttop, endtop, 300, el); // ejecutar animation, ejecutar let interval = setInterval (() => {scrollanimationfn (interval)}, 10)} Para adaptarse al desplazamiento hasta el fondo, necesitamos modificar el momento de la parada de animación. La función doAnimation() modificada es la siguiente:
función doanimation (startValue, endvalue, duración, el) {// use el cierre para guardar las variables dy y paso (distancia de cada desplazamiento de animación) Sea dy = 0; Let Step = (EndValue-startValue)/(duración/10); función de retorno (intervalo) {dy+= step; // Aquí se cambia para usar el valor absoluto para juzgar si (math.abs (dy)> = math.abs (endValue-startValue)) {ClearInterval (intervalo); } el.scrolltop+= step; }} Finalmente, agregamos un desplazamiento al botón inferior html :
<Button onClick = scrollTotop ()> scroll a arriba </botón>
El efecto es el siguiente:
Primero agregue los botones y cuadros de entrada requeridos para el elemento HTML:
<Input type = number PlaceDearter = Ingrese el elemento que se desplazará al estilo de índice = ancho: 200px;/> <button onClick = scrollToElement ()> desplazarse al elemento especificado </botón>
Agregue una función de ejecución de animación que se desplaza el elemento especificado:
function scrollToElement (Containerel, El) {if (! Containerel) {// El elemento principal contenedorel = contenedor; } if (! El) {// Obtenga el elemento para desplazarse para dejar entrar input = document.getElementsBytagName ('input') [0]; Let id = 'item'+input.value; if (! input.Value) {id = 'item'+index; } el = document.getElementById (id); } Let startTop = Containerel.scrolltop; Let EndTop = StartTop+El.getBoundingClientRect (). Top; Deje scrollanimationfn = doanimation (starttop, endtop, 300, contenedorel); LET interval = setInterval (() => {scrollanimationFn (intervalo)}, 10)}El efecto es el siguiente:
El método de uso de scrollTo(x,y) es básicamente el mismo que el método de uso del atributo scrollTop . scrollTo() del elemento principal puede controlar la barra de desplazamiento a una posición especificada, que en realidad es equivalente a establecer el valor de scrollTop . Déjame darte un ejemplo:
// Aquí tomamos el desplazamiento del eje y como un ejemplo de elemento.
Por lo tanto, el uso del método scrollTo() para controlar la barra de desplazamiento es básicamente lo mismo que usar scrolltop. Solo necesitamos simplemente modificar doAnimation() , y el código es el siguiente:
función doanimation (startValue, endvalue, duración, el) {// use el cierre para guardar las variables dy y paso (distancia de cada desplazamiento de animación) Sea dy = 0; Let Step = (EndValue-startValue)/(duración/10); función de retorno (intervalo) {dy+= step; if (math.abs (dy)> = math.abs (endValue-startValue)) {ClearInterval (intervalo); } //el.scrolltop+=step ;// esta línea de código se modifica a la siguiente El.scrollto (0, el.scrolltop+step); }} El efecto de ejecución es consistente con la implementación utilizando scrollTop .
Implementación básica
También podemos usar scrollBy(x,y) para controlar la barra de desplazamiento. Como se mencionó anteriormente, scrollBy() es controlar la distancia especificada de la barra de desplazamiento (tenga en cuenta que no es la posición). Use Scrollby () para implementar fácilmente el requisito de desplazamiento a elementos especificados. El código es el siguiente:
función scrollToElement (Containerel, El) {// Porque GetBoundingClientRect (). La parte superior es la distancia desde la parte superior del elemento secundario hasta la parte superior del elemento principal, por lo que este valor es el desplazamiento del elemento infantil en relación con el elemento principal. Pasamos este valor a Scrollby, es decir, desplazarse al elemento especificado Containerel.scrollby (0, El.getBoundingClientRect (). Top);}Desplácese hasta el fondo:
function scrollTobottom (Containerel) {Let dy = Containerel.scrollheight-containerel.clientHeight; Containerel.scrollby (0, dy);}Desplácese hasta arriba
function scrollTotop (Containerel) {Let dy =-(Containerel.scrollheight-ctainerel.clientHeight); Containerel.scrollby (0, dy);}Agregar animación
Aquí modificamos la función generada por la animación, porque el parámetro de scrollBy() aquí es el desplazamiento de la variable, por lo que hacemos las siguientes modificaciones:
function scrollTobottom (Containerel) {if (! Containerel) {Containerel = Container; } // dy es el desplazamiento de dejar dy = contenedorel.scrollheight-ctainerel.clientHeight; dejar scrollanimationfn = doanimation (dy, 300, contenedor); LET interval = setInterval ((() => {scrollanimationFn (interval)}, 10)} function scrollTotop (ContainerEl) {if (! Containerel) {Containerel = Container; } // dy es el desplazamiento de dejar dy =-(contenedorel.scrollheight-ctainerel.clientheight); dejar scrollanimationfn = doanimation (dy, 300, contenedor); LET interval = setInterval ((() => {scrollanimationFn (interval)}, 10)} función scrollToElement (contenedorel, el) {if (! Containerel) {contenedorel = contenedor; } if (! El) {let input = document.getElementsByTagName ('input') [0]; Let id = 'item'+input.value; if (! input.Value) {id = 'item'+index; } el = document.getElementById (id); } // dy es el desplazamiento de dejar dy = el.getBoundingClientRect (). Top; dejar scrollanimationfn = doanimation (dy, 300, contenedor); Let Interval = SetInterval ((() => {scrollanimationfn (interval)}, 10)}/** * @Description: * @param {type} * @return: */function doAnimation (dy, duración, el) {// use cierre para guardar variables como exe_dy y paste (distancia de cada animación) exe_dy = 0 ejecutado let step = dy/(duración/10); función de retorno (intervalo) {exe_dy+= step; if (math.abs (exe_dy)> = math.abs (dy)) {clearInterval (interval); } el.scrollby (0, paso); }} El efecto de ejecución es consistente con la implementación utilizando scrollTop .
Lo anterior: Point_Up_2: ¿Es su propio resumen detallado y explicación del control de la barra de desplazamiento DOM, así como algunos métodos de uso básicos?
Este es el artículo sobre la explicación detallada del resumen de control de desplazamiento de la barra de desplazamiento del elemento DOM en HTML. Para obtener un contenido de desplazamiento de la barra de desplazamiento DOM más relevante, busque artículos anteriores de wulin.com o continúe navegando por los artículos relacionados a continuación. ¡Espero que todos apoyen a Wulin.com en el futuro!