twitter-bootstrap - 为什么这个 Bootstrap 3.0 模态演示中会出现第二个垂直滚动条？

Question

在此 Bootstrap 3.0 (WIP) 页面上向下滚动到“启动演示模式”。

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

请注意出现第二个垂直滚动条。为什么？

Answer 1

由于 CSS 样式被应用于元素：

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

显式设置溢出属性scroll将导致浏览器显示滚动条，无论是否溢出。

Answer 2

从样式表中完全删除 html 标记。这将解决它。

Answer 3

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

Answer 4

我尝试了从 stackoverflow 中找到的每个示例，最后这是我的解决方案：

$(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.身体）。


    }); 

});