由于滚动条宽度，溢出隐藏的破坏布局答案

【问题标题】：Overflow hidden breaking layout due to scrollbar width由于滚动条宽度，溢出隐藏的破坏布局
【发布时间】：2014-07-16 01:17:13
【问题描述】：

我有一个模式，当激活时会禁用背景滚动（通过将html 设置为overflow: hidden）。

我尝试了各种解决方案，但由于滚动条的宽度，所有这些解决方案都会在激活模式时导致网站宽度增加。这是我的代码：

(function ($) {
    $.fn.extend({
        leanModal: function (options) {
            var defaults = {
                top: 100,
                overlay: 0.5,
                closeButton: null
            };
            var overlay = $("<div id='lean_overlay'></div>");
            $("body").append(overlay);
            options = $.extend(defaults, options);
            return this.each(function () {
                var o = options;
                $(this).click(function (e) {
                    var modal_id = $(this).attr("href");
                    $("#lean_overlay").click(function () {
                        close_modal(modal_id)
                    });
                    $(o.closeButton).click(function () {
                        close_modal(modal_id)
                    });
                    var modal_height = $(modal_id).outerHeight();
                    var modal_width = $(modal_id).outerWidth();
                    $("#lean_overlay").css({
                        "display": "block",
                        opacity: 0
                    });
                    $("#lean_overlay").fadeTo(200, o.overlay);
                    $('html').css('overflow', 'hidden');
                    $(modal_id).css({
                        "display": "block",
                        "position": "fixed",
                        "opacity": 0,
                        "z-index": 11000,
                        "top": o.top + "px"
                    });
                    $(modal_id).fadeTo(200, 1);
                    e.preventDefault()
                })
            });

            function close_modal(modal_id) {
                $("#lean_overlay").fadeOut(200);
                $('html').css('overflow', 'scroll');
                $(modal_id).css({
                    "display": "none"
                })
            }
        }
    })
})(jQuery);

也许我可以通过其他方式禁用背景滚动？

这是一个小提琴：http://jsfiddle.net/p88Rt/1/

【问题讨论】：

如果没有任何 HTML 或 CSS，您将很难获得帮助...Fiddle 也是个好主意。
谢谢@Cholesterol，我加了一个小提琴

标签： jquery scroll modal-dialog overflow

【解决方案1】：

请检查这些更改。也许它会帮助你。在 js fiddle 中将 $('html').css 更改为这个

            $('html').css({
               "overflow": "hidden",
                "width":$("body").outerWidth(),
              });

并以这种方式添加边距。您可以根据需要进行更改。

#popup {
    width:80%;
    height: 200px;
    background: lightyellow;
    margin: 10% 8.5%;
    position: absolute;
    display: none;
    }

【讨论】：

为什么是 8.5%？不确定我是否理解。
不不，这完全取决于你。我写这个是为了在中间有这个模态弹出窗口。 Js 小提琴屏幕很小，因此以这种方式定义边距。您可以完全根据您的要求定义边距。
好的，我明白了。它工作得很好，但是当我在自己的设计中实现它时，它仍然会抛出边距（只有一两个像素）。它还在滚动条所在的位置留下了空隙，而不是继续进行页面设计。有什么方法可以使用 JS 定义 HTML 宽度，以便我的 CSS 始终计算包括滚动条宽度？ @Tans
您提供的 jsfiddle 以这样的方式工作，例如当我们单击打开时，“lean_overlay div”将 17px 添加到 html 正文的宽度。所以我将车身宽度更改为现有的旧车身宽度。如果你想增加尺寸，你可以增加或减少其中的像素。

【解决方案2】：

所以这可行，但会将用户带回页面顶部：

http://jsfiddle.net/p88Rt/2/

(function ($) {
    $.fn.extend({
        leanModal: function (options) {
            var defaults = {
                top: 100,
                overlay: 0.5,
                closeButton: null
            };
            var overlay = $("<div id='lean_overlay'></div>");
            $("body").append(overlay);
            options = $.extend(defaults, options);
            return this.each(function () {
                var o = options;
                $(this).click(function (e) {
                    var modal_id = $(this).attr("href");
                    $("#lean_overlay").click(function () {
                        close_modal(modal_id)
                    });
                    $(o.closeButton).click(function () {
                        close_modal(modal_id)
                    });
                    var modal_height = $(modal_id).outerHeight();
                    var modal_width = $(modal_id).outerWidth();
                    $("#lean_overlay").css({
                        "display": "block",
                        opacity: 0
                    });
                    $("#lean_overlay").fadeTo(200, o.overlay);
                    $('body').css({
                        "overflow": "hidden",
                        "height": "100%",
                        "position": "fixed"
                    });
                    $(modal_id).css({
                        "display": "block",
                        "position": "fixed",
                        "opacity": 0,
                        "z-index": 11000,
                        "top": o.top + "px"
                    });
                    $(modal_id).fadeTo(200, 1);
                    e.preventDefault()

                })
            });

            function close_modal(modal_id) {
                $("#lean_overlay").fadeOut(200);
                $('body').css('overflow', 'scroll');
                $(modal_id).css({
                    "display": "none"
                })
            }
        }
    })
     $("a[rel*=leanModal]").leanModal();
})(jQuery);

有什么建议吗？

【讨论】：