11

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

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

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

4

4 回答 4

14

由于 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将导致浏览器显示滚动条，无论是否溢出。

于 2013-07-16T01:27:12.430 回答
2

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

于 2015-07-01T10:40:32.003 回答
2 
/*remove double scrollbar*/
body.modal-open { overflow: hidden!important; }
于 2015-10-19T20:13:27.480 回答
0

我尝试了从 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.身体）。


    }); 

});
于 2017-11-23T13:10:20.357 回答