为什么在这个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.body).on("hide.bs.modal", function () {

        $(document.body).removeClass("modal-open");

    });

});