Question

我有一个500px到500px的模态，并且在页面主体上关闭了滚动条。在模态内部，副本很长并包含锚标记。我的问题是，当我点击Chrome或Safari中的锚标签时，身体会随着模态副本滚动，任何人都有修复？它适用于所有其他浏览器。下面是我的jQuery

        $('.leftside .home-popup').click(function (e) {
            var os = $('.home-popup').offset();
            var top = os.top;
            var left = os.left;
            var adjustleft = left - 8;
            //call popup with no scroll bars                                                       
            var oldBodyMarginRight = $("body").css("margin-right");
            $("#benefits-modal").modal({ position: [74, adjustleft],
                onShow: function () {
                    // Turn off scroll bars 
                    var body = $("body");
                    var html = $("html");
                    var oldBodyOuterWidth = body.outerWidth(true);
                    var oldScrollTop = html.scrollTop();
                    var newBodyOuterWidth;
                    $("html").css("overflow-y", "hidden");
                    newBodyOuterWidth = $("body").outerWidth(true);
                    body.css("margin-right", (newBodyOuterWidth - oldBodyOuterWidth + parseInt(oldBodyMarginRight)) + "px");
                    html.scrollTop(oldScrollTop); // necessary for Firefox
                    $("#simplemodal-overlay").css("width", newBodyOuterWidth + "px")
                },
                onClose: function () {
                    var html = $("html");
                    var oldScrollTop = html.scrollTop(); // necessary for Firefox.
                    html.css("overflow-y", "").scrollTop(oldScrollTop);
                    $("body").css("margin-right", oldBodyMarginRight);
                    $.modal.close();
                },
                overlayClose: true
            });
            $('a.modalCloseImg').css("left", "700px");
            return false;
        });

Answer 1

body.css({
    "margin-right": (newBodyOuterWidth - oldBodyOuterWidth + parseInt(oldBodyMarginRight)) + "px",
    "overflow": "hidden"
});

然后：

$("body").css({
    "margin-right": oldBodyMarginRight,
    "overflow": "auto"
});

这会将body css设置为overflow:hidden，从而阻止向任何方向滚动。

仅限JQuery，Chrome，Safari，带滚动副本的模态和滚动条。需要停止滚动背景

1 个答案: