Jak umieścić pasek przewijania tylko dla ciała modalnego?

Mam następujący element:

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

Pokazuje takie okno dialogowe, w zasadzie umieszcza pasek przewijania wokół całego modal-dialogi nie modal-bodyzawiera treści, które próbuję wyświetlić.

Obraz wygląda mniej więcej tak:

Jak ustawić modal-bodytylko pasek przewijania dookoła ?

Próbowałem przypisać style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;"do, modal-bodyale to nie zadziałało.

Trzeba ustawić heightz .modal-bodywi dać overflow-y: auto. Zresetuj również .modal-dialogwartość przepełnienia do initial.

Zobacz próbkę roboczą:

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

Jeśli obsługujesz tylko przeglądarkę IE 9 lub nowszą, możesz użyć tego CSS, który będzie płynnie skalował się do rozmiaru okna. W zależności od wysokości nagłówka lub stopki może być jednak konieczne dostosowanie „200px”.

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

Problem rozwiązany za pomocą rozwiązania łączącego @carlos calla i @jonathan marston.

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

Dla wersji Bootstrap> = 4.3

Bootstrap 4.3 dodał nową wbudowaną funkcję przewijania do modali. To sprawia, że przewijana jest tylko treść modalna, jeśli rozmiar treści spowodowałby przewijanie strony. Aby go użyć, po prostu dodaj klasę modal-dialog-scrollable do tego samego elementu div, który ma klasę modal-dialog .

Oto przykład:

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

Dodając do wspaniałej odpowiedzi Carlosa Calli .

Wysokość .modal-body musi być ustawiona, ALE możesz użyć zapytań o media, aby upewnić się, że jest ona odpowiednia dla rozmiaru ekranu.

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

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

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

Opcjonalnie : jeśli nie chcesz, aby modal przekraczał wysokość okna i użyj paska przewijania w .modal-body, możesz użyć tego elastycznego rozwiązania. Zobacz działające demo tutaj: 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'));
  }
});

Wiem, że to stary temat, ale może pomóc komuś innemu.

Udało mi się sprawić, że treść przewija się, naprawiając pozycję elementu dialogowego modalnego. A ponieważ nigdy nie poznałbym dokładnej wysokości okna przeglądarki, wziąłem informacje, których byłem pewien, wysokość nagłówka i stopki. Byłem wtedy w stanie dopasować górny i dolny margines elementu ciała modalnego do tych wysokości. To przyniosło rezultat, którego szukałem. Rzuciłem razem skrzypce, aby pokazać swoją pracę.

także, jeśli chcesz mieć pełnoekranowe okno dialogowe, po prostu odznacz szerokość: auto; wewnątrz sekcji .modal-dialog.full-screen.

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

A oto css, którego użyłem do zmodyfikowania okna dialogowego ładowania początkowego.

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

Lub, prościej, możesz najpierw umieścić między tagami, a następnie do klasy css.

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

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

Używając max-heightwith vhjako jednostki w modal-bodylub wrapper div wewnątrz modal-body. Spowoduje to automatyczną zmianę wysokości modal-bodylub zawijanego elementu div (w tym przykładzie), gdy użytkownik zmieni rozmiar okna.

vh to jednostka długości reprezentująca 1% wielkości rzutni dla wysokości rzutni.

Tabela zgodności przeglądarki dla vhurządzenia.

Przykład: https://jsfiddle.net/q3xwr53f/

To, co zadziałało, to ustawienie wysokości na 100%, mając nadzieję, że przepełnienie na auto pomoże

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

Proste rozwiązanie js pozwalające ustawić wysokość modalną proporcjonalną do wzrostu ciała:

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

wysokość ciała musi wynosić 100%:

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

Ustawiłem modalną wysokość ciała na 80% ciała, można to oczywiście dostosować.

Mam nadzieję, że to pomoże.

W najnowszej wersji bootstrap jest klasa umożliwiająca przewijanie ciała modalnego.

.modal-dialog- scrollable do .modal-dialog .

Link modalny Bootstrap dla treści przewijalnej w treści modalnej

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