Bagaimana cara menempatkan scroll bar hanya untuk modal-tubuh?

Saya memiliki elemen berikut:

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

Ini menunjukkan dialog modal sesuatu seperti ini, pada dasarnya, menempatkan bilah gulir di seluruh modal-dialogdan bukan modal-bodyyang berisi konten yang saya coba tampilkan.

Gambarnya terlihat seperti ini:

Bagaimana cara mendapatkan bilah gulir di sekitar modal-bodysaja?

Saya telah mencoba menugaskan style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;"untuk modal-bodytetapi tidak berhasil.

Anda harus mengatur heightbagian .modal-bodydalam dan memberikannya overflow-y: auto. Atur ulang .modal-dialognilai luapan ke initial.

Lihat contoh kerja:

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

Jika Anda hanya mendukung IE 9 atau lebih tinggi, Anda dapat menggunakan CSS ini yang akan dengan lancar skala ke ukuran jendela. Anda mungkin perlu mengubah "200px", tergantung ketinggian header atau footer Anda.

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

Masalah diselesaikan dengan menggabungkan solusi @carlos calla dan @jonathan marston.

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

Untuk versi Bootstrap> = 4.3

Bootstrap 4.3 menambahkan fitur gulir bawaan ke modals. Ini hanya membuat gulir konten modal-tubuh jika ukuran konten sebaliknya membuat gulir halaman. Untuk menggunakannya, cukup tambahkan kelas modal-dialog-scrollable ke div yang sama yang memiliki kelas modal-dialog .

Berikut ini sebuah contoh:

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

Menambah jawaban hebat Carlos Calla .

Ketinggian .modal-body harus diatur, TETAPI Anda dapat menggunakan kueri media untuk memastikannya sesuai untuk ukuran layar.

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

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

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

Opsional : Jika Anda tidak ingin modal melebihi ketinggian jendela dan menggunakan bilah gulir di .modal-body, Anda dapat menggunakan solusi responsif ini. Lihat demo yang berfungsi di sini: 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'));
  }
});

Saya tahu ini adalah topik lama tetapi ini dapat membantu orang lain.

Saya dapat membuat body scroll dengan membuat posisi elemen modal-dialog diperbaiki. Dan karena saya tidak akan pernah tahu ketinggian persis dari jendela browser, saya mengambil informasi yang saya yakini, tinggi header dan footer. Saya kemudian bisa membuat margin atas dan bawah elemen modal-tubuh cocok dengan ketinggian itu. Ini kemudian menghasilkan hasil yang saya cari. Saya melemparkan biola untuk menunjukkan pekerjaan saya.

juga, jika Anda ingin dialog layar penuh cukup hapus komentar lebar: otomatis; di dalam bagian .modal-dialog.full-screen.

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

Dan di sini adalah css yang saya gunakan untuk memodifikasi dialog 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;
}

Atau lebih sederhana, Anda dapat menempatkan di antara tag Anda terlebih dahulu, kemudian ke kelas css.

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

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

Menggunakan max-heightdengan vhsebagai unit pada modal-bodyatau pembungkus bagian dalam modal-body. Ini akan mengubah ukuran ketinggian modal-bodyatau div pembungkus (dalam contoh ini) secara otomatis ketika pengguna mengubah ukuran jendela.

vh adalah satuan panjang yang mewakili 1% dari ukuran viewport untuk tinggi viewport.

Bagan kompatibilitas browser untuk vhunit.

Contoh: https://jsfiddle.net/q3xwr53f/

Apa yang berhasil bagi saya adalah mengatur ketinggian hingga 100% yang memiliki limpahan otomatis berharap ini akan membantu

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

Solusi js sederhana untuk mengatur tinggi modal sebanding dengan tinggi badan:

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

Tinggi badan harus 100%:

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

Saya mengatur tinggi badan modal menjadi 80% dari tubuh, ini tentu saja dapat disesuaikan.

Semoga ini bisa membantu.

Dalam versi bootstrap terbaru ada kelas untuk membuat modal tubuh dapat digulir.

.modal-dialog- scrollable ke .modal-dialog .

Link modal bootstrap untuk konten yang dapat digulir modal

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