Question

我正在使用jquery tools overlay，这很棒。但是，滚动行为有点奇怪。如果您打开叠加层并将鼠标放在叠加层上，如果位于叠加层的顶部/底部，您仍然可以在其后面滚动页面。

是否有一种方法（最好是内置的jquery工具）来阻止覆盖页面滚动后的页面？

Answer 1

未使用jquery工具，但在显示ui对话框时，通常会执行以下操作以防止屏幕滚动。

$("body").css("overflow", "hidden");

您还可以向窗口滚动添加一个事件，以防止滚动，因为此answer描述了这个article

Answer 2

你走了：

$(function() {
        $("#element").overlay({
            mask: {
            color: '#000',
            loadSpeed: 200,
            opacity: 0.7
        },
        closeOnClick: true,
        onLoad: function () {
            $("body").css("overflow", "hidden");
        },
        onClose: function () {
            $("body").css("overflow", "");
        }
    });
});

Answer 3

看看这个。你不能阻止底层页面滚动，但是你可以阻止你的OVERLAY滚动它......毕竟那些需要关注的是什么？

尝试将覆盖的div设为CSS @media screen为fixed。

Answer 4

.modal {
    //your other settings
    position:absolute !important;
}

将此添加到css以将模态窗口固定到背景。如果模态窗口大于屏幕，整个页面当然会滚动（包括模态窗口和背景）。

任何方式停止页面BEHIND jquery工具叠加滚动？

4 个答案: