Come mettere la barra di scorrimento solo per modal-body?

Ho il seguente 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> 

Mostra una finestra di dialogo modale simile a questa, in sostanza, mette la barra di scorrimento attorno all'intero modal-dialoge non modal-bodycontiene il contenuto che sto cercando di visualizzare.

L'immagine è simile a questa:

Come posso ottenere solo una barra di scorrimento modal-body?

Ho cercato di assegnare style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;"a modal-body, ma non ha funzionato.

Devi impostare heightil .modal-bodyin e dare overflow-y: auto. Ripristina anche il .modal-dialogvalore di overflow su initial.

Vedi l'esempio di lavoro:

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;
}

Se stai supportando solo IE 9 o versioni successive, puoi utilizzare questo CSS che si ridimensionerà senza problemi in base alla dimensione della finestra. Tuttavia, potrebbe essere necessario modificare "200px", a seconda dell'altezza dell'intestazione o del piè di pagina.

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

Problema risolto con la soluzione combinata @carlos calla e @jonathan marston.

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

Per le versioni Bootstrap> = 4.3

Bootstrap 4.3 ha aggiunto una nuova funzionalità di scorrimento integrata ai modali. Questo fa scorrere solo il contenuto del corpo modale se la dimensione del contenuto altrimenti farebbe scorrere la pagina. Per usarlo, basta aggiungere la classe modal-dialog-scrollable allo stesso div che ha la classe modal-dialog .

Ecco un esempio:

<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>

Aggiungendo alla grande risposta di Carlos Calla .

L'altezza di .modal-body deve essere impostata, MA è possibile utilizzare le query multimediali per assicurarsi che sia appropriato per le dimensioni dello schermo.

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

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

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

Opzionale : Se non vuoi che il modale superi l'altezza della finestra e usi una barra di scorrimento nel corpo .modal, puoi usare questa soluzione reattiva. Guarda una demo funzionante qui: 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'));
  }
});

So che questo è un vecchio argomento, ma questo potrebbe aiutare qualcun altro.

Sono stato in grado di far scorrere il corpo rendendo fissa la posizione dell'elemento del dialogo modale. E dal momento che non avrei mai saputo l'altezza esatta della finestra del browser, ho preso le informazioni di cui ero sicuro, l'altezza dell'intestazione e il piè di pagina. Sono stato quindi in grado di far corrispondere i margini superiore e inferiore dell'elemento del corpo modale a quelle altezze. Questo ha quindi prodotto il risultato che stavo cercando. Ho messo insieme un violino per mostrare il mio lavoro.

inoltre, se si desidera una finestra di dialogo a schermo intero, annullare l'annullamento della larghezza: auto; all'interno della sezione .modal-dialog.full-screen.

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

Ed ecco il CSS che ho usato per modificare la finestra di dialogo bootstrap.

.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 più semplice puoi inserire prima tra i tuoi tag, poi nella classe css.

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

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

Usando max-heightcon vhcome unità sul modal-bodydiv o un wrapper all'interno di modal-body. Questo ridimensionerà automaticamente l'altezza modal-bodyo il div wrapping (in questo esempio) quando un utente ridimensiona la finestra.

vh è l'unità di lunghezza che rappresenta l'1% della dimensione della finestra per l'altezza della finestra.

Tabella di compatibilità del browser per l' vhunità.

Esempio: https://jsfiddle.net/q3xwr53f/

Quello che ha funzionato per me è impostare l'altezza al 100% avendo l'overflow su auto speranza che questo possa aiutare

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

Una semplice soluzione js per impostare l'altezza modale proporzionale all'altezza del corpo:

$(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>');
});

l'altezza del corpo deve essere del 100%:

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

Ho impostato l'altezza modale del corpo sull'80% del corpo, questo può ovviamente essere personalizzato.

Spero che sia d'aiuto.

Nell'ultima versione di bootstrap esiste una classe per rendere scorrevole il corpo modale.

.modal-dialog-scrollable in .modal-dialog .

Link modale Bootstrap per contenuti scorrevoli modali del corpo

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