วิธีการวางแถบเลื่อนสำหรับ modal-body เท่านั้น?

ฉันมีองค์ประกอบดังต่อไปนี้:

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

มันแสดงข้อความโต้ตอบแบบโมดัลอะไรแบบนี้โดยทั่วไปมันใส่แถบเลื่อนไปทั่วทั้งหมดmodal-dialogและไม่ใช่modal-bodyเนื้อหาที่ฉันพยายามแสดง

ภาพมีลักษณะดังนี้:

ฉันจะได้รับแถบเลื่อนรอบmodal-bodyเท่านั้นได้อย่างไร

ฉันลองกำหนดstyle="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;"ให้modal-bodyแต่มันไม่ทำงาน

คุณจะต้องตั้งค่าheightของในและให้มัน.modal-body overflow-y: autoการตั้งค่านอกจากนี้ยังคุ้มค่าที่จะล้น.modal-dialoginitial

ดูตัวอย่างการทำงาน:

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

หากคุณรองรับ IE 9 หรือสูงกว่าเท่านั้นคุณสามารถใช้ CSS นี้ซึ่งจะปรับขนาดตามขนาดของหน้าต่างอย่างราบรื่น คุณอาจต้องปรับแต่ง "200px" ขึ้นอยู่กับความสูงของส่วนหัวหรือส่วนท้ายของคุณ

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

แก้ไขปัญหาด้วยการรวมโซลูชัน @carlos calla และ @jonathan marston

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

สำหรับ Bootstrap เวอร์ชั่น> = 4.3

Bootstrap 4.3 เพิ่มคุณสมบัติการเลื่อนในตัวใหม่ให้กับ modals สิ่งนี้ทำให้เลื่อนเนื้อหาmodal-body เท่านั้นหากขนาดของเนื้อหาจะทำให้หน้าเลื่อน หากต้องการใช้งานเพียงเพิ่มคลาสmodal-dialog-scrollableให้กับ div เดียวกันกับคลาสmodal-dialog

นี่คือตัวอย่าง:

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

การเพิ่มคำตอบที่ยอดเยี่ยมของCarlos Calla

ต้องตั้งค่าความสูงของ. โมดูลร่างกาย แต่คุณสามารถใช้แบบสอบถามสื่อเพื่อให้แน่ใจว่าเหมาะสมกับขนาดหน้าจอ

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

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

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

ทางเลือก : หากคุณไม่ต้องการให้ modal เกินความสูงของหน้าต่างและใช้ scrollbar ใน. modal-body คุณสามารถใช้โซลูชันที่ตอบสนองได้ ดูตัวอย่างการทำงานได้ที่นี่: 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'));
  }
});

ฉันรู้ว่านี่เป็นหัวข้อเก่า แต่อาจช่วยคนอื่นได้

ฉันสามารถทำการเลื่อนร่างกายโดยการทำให้ตำแหน่งองค์ประกอบกล่องโต้ตอบแก้ไข และเนื่องจากฉันจะไม่ทราบความสูงที่แน่นอนของหน้าต่างเบราว์เซอร์ฉันจึงใช้ข้อมูลที่ฉันแน่ใจเกี่ยวกับความสูงของส่วนหัวและส่วนท้าย ฉันสามารถทำให้ส่วนต่าง ๆ ของร่างกายเป็นโมดอลและขอบล่างตรงกับความสูงเหล่านั้น นี่ทำให้เกิดผลลัพธ์ที่ฉันต้องการ ฉันเหวี่ยงซอเพื่อแสดงการทำงานของฉัน

นอกจากนี้หากคุณต้องการกล่องโต้ตอบแบบเต็มหน้าจอเพียงยกเลิกความคิดเห็นความกว้าง: อัตโนมัติ ภายในส่วน. mod-dialog.full-screen

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

และนี่คือ css ที่ฉันใช้แก้ไขไดอะล็อก 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;
}

หรือง่ายกว่าที่คุณสามารถใส่ระหว่างแท็กของคุณก่อนจากนั้นไปที่ css class

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

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

ใช้max-heightกับvhเป็นหน่วยบนmodal-bodyหรือภายในเสื้อคลุม div modal-bodyของ การดำเนินการนี้จะปรับขนาดความสูงของmodal-bodyหรือ div div (ในตัวอย่างนี้) โดยอัตโนมัติเมื่อผู้ใช้ปรับขนาดหน้าต่าง

vh เป็นหน่วยความยาวคิดเป็น 1% ของขนาดวิวพอร์ตสำหรับความสูงวิวพอร์ต

แผนภูมิความเข้ากันได้ของเบราว์เซอร์สำหรับvhหน่วย

ตัวอย่าง: https://jsfiddle.net/q3xwr53f/

สิ่งที่ใช้ได้ผลสำหรับฉันคือการตั้งค่าความสูงเป็น 100% การมีส่วนเกินโดยอัตโนมัติหวังว่าสิ่งนี้จะช่วยได้

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

วิธีการแก้ปัญหา js อย่างง่ายเพื่อตั้งค่าความสูงเป็นกิริยาช่วยตามสัดส่วนความสูงของร่างกาย:

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

ความสูงของร่างกายจะต้องเป็น 100%:

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

ฉันตั้งค่าความสูงของร่างกายกิริยาถึง 80% ของร่างกายซึ่งสามารถกำหนดเองได้แน่นอน

หวังว่ามันจะช่วย

ในเวอร์ชั่นบูตสแตรปล่าสุดมีคลาสที่จะทำให้สามารถเลื่อนเนื้อหาของคำกริยาได้

.modal-โต้ตอบเลื่อนไป.modal โต้ตอบ

Bootstrap ลิงค์ modal สำหรับเนื้อหาที่สามารถเลื่อนได้ของ modal body

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