Este es un problema poco común que se nos presentó en la versión de Bootstrap 4, al momento de hacer clic en un componente para desplegar el contenido, enseguida nos envía al final de la pantalla.
Nosotros nos dimos cuenta que el error se presenta cuando cualquiera de los componentes tiene una altura muy amplia y eso provoca que se tenga que hacer scroll hacia abajo para poder ver los otros componentes.

collapse

Existe varias alternativas para darle solución a esto, aquí te dejamos la que encontramos nosotros y nos pareció la mejor.

$(document).on('shown.bs.collapse', function(event) {
  var item_height = event.target.clientHeight,
      window_height = window.innerHeight,
      offset_top = event.target.offsetTop,
      scroll_y = window.scrollY;
  
  if (scroll_y > (window_height - item_height)) {
    $('html, body').animate({
       scrollTop: ((window_height - item_height) / 2) + offset_top
    }, 1000);
  }
}
Paso a paso
  1. Detectamos cada vez que ocurre el evento de collapse
  2. Definimos las variables con las que vamos hacer nuestros cálculos
    item_height: Altura de nuestro componente
    window_height: Altura de la venta
    offset_top: Distancia de la parte de arriba entre componentes
    scroll_y: Valor del scroll en el eje Y
  3. Si el valor del scroll en eje Y es mayor a la altura de nuestra venta menos el valor del componente quiere decir que el scroll ya fue recorrido hacia abajo y si es el caso entonces se presentará el fallo;
  4. Hacemos que nos retorno hacia arriba procurando que la información del complemento desplazado quede centrada y visible en la ventana para el usuario

Referencias:

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

https://getbootstrap.com/docs/4.0/components/collapse/

https://stackoverflow.com/questions/31100690/using-bootstrap-data-toggle-collapse-and-scrollintoview-to-show-and-scroll-t

Esperamos que te pueda servir esta solución, si fue así déjanos tu comentario, bye

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Bienvenido

Logo

En es blog encontrarás artículos sobre desarrollo web, tecnologías de la información y marketing digital.
Si te sirvió nuestro contenido déjanos tu comentario.