顯示滾動時如何隱藏滾動條在模態對話框中？

Question

當我打開模式對話框時，body有溢出：auto。但是當模式對話框有自己的滾動條時，我們會看到兩個滾動條 - 活動的和不活動的。我怎樣才能保留只有一個，積極的滾動？現在的情況如下

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

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

Answer 1

很簡單。彈出顯示時，只需添加正文標籤overflow:hidden;。

下面的代碼段只是使用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

同樣的例子