"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > ¿Cómo puedo desplazar automáticamente un DIV a un elemento específico dentro de él sin desplazar a toda la página?

¿Cómo puedo desplazar automáticamente un DIV a un elemento específico dentro de él sin desplazar a toda la página?

Publicado el 2025-03-24
Navegar:195

How can I automatically scroll a div to a specific element within it without scrolling the entire page?

desplazándose a un elemento dentro de un div

Su objetivo es programar un DIV desplazado para desplazarse automáticamente a un elemento dentro de él al hacer clic. Utilizar ScrolliNtoview (true) parece desplazarse por toda la página, dejándolo perplejo.

SOLUCIÓN:

Para abordar este problema, debe determinar el desplazamiento superior del elemento de destino relativo a su padre, el contenedor div sploling Div. Esto se logra a través de:

var myElement = document.getElementById('element_within_div');
var topPos = myElement.offsetTop;

El toppos ahora contiene la distancia de píxel entre la parte superior del div y el elemento que desea visible.

next, instruye el div scroll a esa ubicación usando scrolltop:

[&]
document.getElementById('scrolling_div').scrollTop = topPos;
en Prototype JS, esto se traduce en:

var posArray = $('element_within_div').positionedOffset();
$('scrolling_div').scrollTop = posArray[1];
Esta acción desplaza el div para alinear el elemento especificado en la parte superior, o lo más cerca posible si el desplazamiento no permite alcanzar la parte superior.

Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3