¿Cómo poner la barra de desplazamiento solo para modal-body?

Tengo el siguiente elemento:

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" style="overflow-y: scroll; max-height:85%;  margin-top: 50px; margin-bottom:50px;" > 
        <div class="modal-content"> 
            <div class="modal-header"> 
                <h3 class="modal-title"></h3> 
            </div> 
            <div class="modal-body"></div> 
            <div class="modal-footer"></div> 
        </div> 
    </div> 
</div> 

Muestra un cuadro de diálogo modal como este, básicamente, coloca una barra de desplazamiento alrededor de todo modal-dialogy no modal-bodyel contenido que estoy tratando de mostrar.

La imagen se ve así:

¿Cómo consigo solo una barra de desplazamiento modal-body?

He intentado asignar style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;"a modal-body, pero no funcionó.

Usted tiene que fijar el heightde la .modal-bodyde y darle overflow-y: auto. También restablezca el .modal-dialogvalor de desbordamiento a initial.

Ver la muestra de trabajo:

http://www.bootply.com/T0yF2ZNTUd

.modal{
    display: block !important; /* I added this to see the modal, you don't need this */
}

/* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    height: 250px;
    overflow-y: auto;
}

Si solo es compatible con IE 9 o superior, puede usar este CSS que se escalará sin problemas al tamaño de la ventana. Sin embargo, es posible que necesite ajustar el "200px", dependiendo de la altura de su encabezado o pie de página.

.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

Problema resuelto con la solución combinada @carlos calla y @jonathan marston.

    /* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

Para versiones de Bootstrap> = 4.3

Bootstrap 4.3 agregó una nueva función de desplazamiento incorporada a los modales. Esto solo hace que el contenido del cuerpo modal se desplace si el tamaño del contenido haría que la página se desplazara. Para usarlo, simplemente agregue la clase modal-dialog-scrollable al mismo div que tiene el modal-dialog clase .

Aquí hay un ejemplo:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Agregando a la gran respuesta de Carlos Calla .

Se debe establecer la altura de .modal-body, PERO puede usar consultas de medios para asegurarse de que sea apropiado para el tamaño de la pantalla.

.modal-body{
    height: 250px;
    overflow-y: auto;
}

@media (min-height: 500px) {
    .modal-body { height: 400px; }
}

@media (min-height: 800px) {
    .modal-body { height: 600px; }
}

Opcional : si no desea que el modal exceda la altura de la ventana y use una barra de desplazamiento en el .modal-body, puede usar esta solución receptiva. Vea una demostración de trabajo aquí: http://codepen.io/dimbslmh/full/mKfCc/

function setModalMaxHeight(element) {
  this.$element     = $(element);
  this.$content     = this.$element.find('.modal-content');
  var borderWidth   = this.$content.outerHeight() - this.$content.innerHeight();
  var dialogMargin  = $(window).width() > 767 ? 60 : 20;
  var contentHeight = $(window).height() - (dialogMargin + borderWidth);
  var headerHeight  = this.$element.find('.modal-header').outerHeight() || 0;
  var footerHeight  = this.$element.find('.modal-footer').outerHeight() || 0;
  var maxHeight     = contentHeight - (headerHeight + footerHeight);

  this.$content.css({
      'overflow': 'hidden'
  });

  this.$element
    .find('.modal-body').css({
      'max-height': maxHeight,
      'overflow-y': 'auto'
  });
}

$('.modal').on('show.bs.modal', function() {
  $(this).show();
  setModalMaxHeight(this);
});

$(window).resize(function() {
  if ($('.modal.in').length != 0) {
    setModalMaxHeight($('.modal.in'));
  }
});

Sé que este es un tema antiguo, pero puede ayudar a alguien más.

Pude hacer que el cuerpo se desplace haciendo que la posición del elemento de diálogo modal fuera fija. Y como nunca sabría la altura exacta de la ventana del navegador, tomé la información de la que estaba seguro, la altura del encabezado y el pie de página. Luego pude hacer que los márgenes superior e inferior del elemento modal-body coincidan con esas alturas. Esto produjo el resultado que estaba buscando. Lancé un violín para mostrar mi trabajo.

Además, si desea un cuadro de diálogo de pantalla completa, simplemente descomente el ancho: auto; dentro de la sección .modal-dialog.full-screen.

https://jsfiddle.net/lot224/znrktLej/

Y aquí está el CSS que utilicé para modificar el diálogo de arranque.

.modal-dialog.full-screen {
    position:fixed;
    //width:auto;  // uncomment to make the width based on the left/right attributes.
    margin:auto;                        
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
}

.modal-dialog.full-screen .modal-content {
      position:absolute;
      left:10px;
      right:10px;
      top:10px;
      bottom:10px;
}

.modal-dialog.full-screen .modal-content .modal-header {
        height:55px;  // adjust as needed.
}

.modal-dialog.full-screen .modal-content .modal-body {
        overflow-y: auto;
          position: absolute;
          top: 0;
          bottom: 0;
        left:0;
        right:0;
          margin-top: 55px; // .modal-header height
          margin-bottom: 80px;  // .modal-footer height
}

.modal-dialog.full-screen .modal-content .modal-footer {
        height:80px;  // adjust as needed.
        position:absolute;
        bottom:0;
        left:0;
        right:0;
}

O más simple, puede poner entre sus etiquetas primero, luego a la clase css.

<div style="height: 35px;overflow-y: auto;"> Some text o othre div scroll </div>

#scroll-wrap {
    max-height: 50vh;
    overflow-y: auto;
}

Utilizando max-heightcon vhcomo la unidad en la modal-bodyo una envoltura div dentro de la modal-body. Esto cambiará el tamaño de la altura modal-bodyo del div de ajuste (en este ejemplo) automáticamente cuando un usuario cambie el tamaño de la ventana.

vh es la unidad de longitud que representa el 1% del tamaño de la vista para la altura de la vista.

Tabla de compatibilidad del navegador para la vhunidad.

Ejemplo: https://jsfiddle.net/q3xwr53f/

Lo que funcionó para mí es establecer la altura al 100% al tener el desbordamiento automático, espero que esto ayude

   <div style="height: 100%;overflow-y: auto;"> Some text o othre div scroll </div>

Una solución js simple para establecer la altura modal proporcional a la altura del cuerpo:

$(document).ready(function () {
    $('head').append('<style type="text/css">.modal .modal-body {max-height: ' + ($('body').height() * .8) + 'px;overflow-y: auto;}.modal-open .modal{overflow-y: hidden !important;}</style>');
});

la altura del cuerpo debe ser del 100%:

html, body {
    height: 100%;
    min-height: 100%;
}

Establezco la altura modal del cuerpo al 80% del cuerpo, por supuesto, esto se puede personalizar.

Espero eso ayude.

En la última versión de bootstrap hay una clase para hacer que el cuerpo modal se pueda desplazar.

.modal-dialog-scrollable a .modal-dialog .

Enlace modal de Bootstrap para contenido desplazable del cuerpo modal

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>