Tại sao thanh cuộn dọc thứ hai lại xuất hiện trong bản demo Bootstrap 3.0 Modal này?

Question

Cuộn xuống một chút trên trang Bootstrap 3.0 (WIP) này để 'Khởi chạy Chế độ Demo'.

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

Lưu ý thanh cuộn dọc thứ hai xuất hiện. Tại sao?

Answer 1

Bởi vì phong cách CSS được áp dụng cho phần tử:

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

Rõ ràng thiết lập một tài sản tràn đến scroll sẽ làm cho trình duyệt để hiển thị một thanh cuộn cho dù có tràn hay không.

Answer 2

Xóa hoàn toàn thẻ html khỏi bảng định kiểu của bạn. Điều này sẽ sửa chữa nó.

Answer 3

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

Answer 4

tôi đã cố gắng mỗi ví dụ mà tôi tìm thấy từ stackoverflow và cuối cùng đây là giải pháp của tôi:

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