1

Tengo un modal de bootstrap:

<div class="modal" tabindex="-1" aria-hidden="true"> 
    <div class="modal-dialog modal-dialog-scrollable">
         <div class="modal-content">
             <div class="modal-header">
                 ...
             </div>
             <div class="modal-body">
                 ...
             </div>
             <div class="modal-footer">
                 ...
             </div>
         </div>
    </div>
</div>

Al cual le apliqué la clase modal-dialog-scrollable para que se cree un scroll automaticamente. Necesito que éste scroll se desplace hasta el final de alguna manera, básicamente que muestre la última sección del cuerpo del modal. ¿Cómo podría hacer eso posible?

4
  • mmm... ¿no es lo mismo que la otra pregunta?
    – masterguru
    el 30 jun. 2022 a las 18:49
  • En la otra pregunta lo hacía con un scroll que se aplicaba con css, en este caso lo estoy haciendo con clases de bootstrap, intenté hacerlo de la misma manera, con getElementById al respectivo div pero no funcionó. Entonces me pregunto si con bootstrap habrá la manera de aplicar lo que requiero.
    – Andy White
    el 30 jun. 2022 a las 18:57
  • Ya te he contestado, mi respuesta viene a ser identica que la otra vez, solo que aplicada cuando se da el evento del click sobre el botón que muestra el modal
    – masterguru
    el 30 jun. 2022 a las 19:46
  • El problema era que estaba poniendo el Id que obtiene el scroll en cada uno de los div del modal menos en el del body, no lo había tenido en cuenta, con tu respuesta en esta pregunta pude notarlo y pude solucionarlo; gracias.
    – Andy White
    el 1 jul. 2022 a las 0:31

1 respuesta 1

1

Normalmente un modal de bootstrap por defecto está escondido, por lo tanto parece que no tiene aún la propiedad scrollHeight con valor positivo (vale 0).

Es cuando se muestra que adquiere un valor positivo, y es entonces cuando podemos aplicar lo que ya resolvimos en la otra respuesta.

Dejo un ejemplo funcional donde he agregado un botón para lanzar un modal y en javascript lo dejo a la escucha del evento click para realizar el scroll hacia abajo del todo sobre el elemento con el id="modal-body-example" que también he agregado:

botonMostrarModal.addEventListener('click', function() {
  var objDiv = document.getElementById("modal-body-example");
  objDiv.scrollTop = objDiv.scrollHeight;
})
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<button id="botonMostrarModal" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Abrir modal
</button>
<div id="exampleModal" class="modal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        ...
      </div>
      <div id="modal-body-example" class="modal-body">
        Contenido...<br>
        Contenido...<br>
        Contenido...<br>
        Contenido...<br>
        Contenido...<br>
        Contenido...<br>
        Contenido...<br>
        Contenido...<br>
        Contenido...<br>
        Contenido...<br>
        Contenido...<br>
        Final<br>
      </div>
      <div class="modal-footer">
        ...
      </div>
    </div>
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.