在模态对话框中显示滚动时如何隐藏正文滚动条？答案

【问题标题】：How to hide the body scroll bar when showing scroll is in modal dialog?在模态对话框中显示滚动时如何隐藏正文滚动条？
【发布时间】：2015-11-04 11:23:48
【问题描述】：

当我打开模态对话框时，正文有溢出：自动。但是当模态对话框有自己的滚动条时，我们会看到两个滚动条——活动的和非活动的。我怎样才能只保留一个活动卷轴？现在的情况是这样的

html {
  overflow-y: scroll;
  overflow-x: auto;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}

【问题讨论】：

标签： javascript html css twitter-bootstrap modal-dialog

【解决方案1】：

这很简单。只需在弹出窗口显示时添加正文标签overflow:hidden;。

下面的 sn-p 只使用 bootstrap 模态。如果您在显示弹出窗口时查找结果 html，您可以看到它。

p {
  margin-top:350px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

  
  
  <!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
  
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha256-Sk3nkD6mLTMOF0EOpNtsIry+s1CsaqQC1rVLTAy+0yc= sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>

jsbin.com中的同一个例子

【讨论】：