Dlaczego pojawia się drugi pionowy pasek przewijania w tej demonstracyjnej wersji Bootstrap 3.0?

Question

Przewiń w dół na tej stronie Bootstrap 3.0 (WIP) do "Uruchom Demo Modal".

http://bs3.codersgrid.com/javascript/#modals

Wskazówka pojawia się drugi pionowy pasek przewijania. Czemu?

Answer 1

Ze względu na styl CSS stosowane do elementu:

.modal { 
    bottom: 0; 
    display: none; 
    left: 0; 
    overflow-x: auto; 
    overflow-y: scroll; /* <--- this guy right here */ 
    position: fixed; 
    right: 0; 
    top: 0; 
    z-index: 1040; 
} 

Jawne ustawienie właściwości przelewowy do scroll spowoduje, że przeglądarka wyświetli pasek przewijania czy jest przepełnienie lub nie.

Answer 2

Całkowicie usuń znacznik html z arkusza stylów. To naprawi to.

Answer 3

/*remove double scrollbar*/ 
body.modal-open { overflow: hidden!important; } 

Answer 4

Próbowałem każdego przykładu, że znalazłem z stackoverflow i wreszcie to jest moje rozwiązanie:

 
$(function(){
$(document.body).on("show.bs.modal", function() {
 
     $(window.document).find("html").addClass("modal-open");
 
     $(window.document).find("div.wrapper").css({"margin-right":"17px"});
 
    });
 
    $(document.body).on("hide.bs.modal", function() {
 
     $(window.document).find("html").removeClass("modal-open");
 
     $(window.document).find("div.wrapper").removeAttr("style"); 
 
    });
 
});
 
$(function(){
 
    $(document.body).on("show.bs.modal", function() {
 
     $(document.body).addClass("modal-open");
 
    });
 
    $(document.body).on("hide.bs.modal", function() {
 
     $(document.body).removeClass("modal-open");
 
    });
 
});