打开模态窗口时禁用页面滚动

Question

打开模态窗口时禁用页面滚动

javascripthtmlcssmodal-dialog

9

我正在创建这个网站，当您单击标题第二行最右侧的链接时，将弹出嵌入了YouTube视频的模态窗口。

当我滚动模态窗口时，BODY也会滚动，我想停止这种情况。我该如何做？

非常感谢您的帮助！谢谢您的时间。

- Hirohito Yamada

1

密码保护链接。 - naeramarth7

1

您可以添加此CSS $("body").css("overflow-y", "hidden")。 - Mahedi Sabuj

1

嗨，感谢您的快速回复。我的朋友为我编写了这个JavaScript代码，所以我不太确定应该在我的JS文件中添加它的位置。您能否请详细指导一下我？ - Hirohito Yamada

1

@Hirohito_Yamada，当您单击链接时，请在单击函数中添加此jquery，如$("#yourElemrntIdName").click(function(){$("body").css("overflow-y", "hidden");});。 - Mahedi Sabuj

1

可能是防止页面滚动但允许覆盖层滚动的重复问题。 - Dawid Zbiński

5个回答

8

在我看到的其他修复方案中，当模态框打开时尝试在“BODY”标签上应用固定定位时，文档会滚动到顶部，因为默认情况下它的位置在顶部0。我尝试了这种方法，并发现最好的解决方案是在html标记上应用overflow hidden而不是body标记。这样我们就不需要任何固定定位，您可以保持文档在模态框打开之前的位置。在我找到的解决方案中，您只需要应用类似以下的内容：

function openModal(){
   $("html").css({"overflow-y":"hidden"})
   // open your modal box function in this area...
}

这就是修复方法。您可以创建一个CSS类，并在打开或关闭模态框时切换HTML上的类。但对我来说，这肯定解决了问题。

- Michael Norward

该死。这是第一件对我有用的事情。我一直在折腾scrollTop和各种无聊的东西。谢谢！ - dgo

4

您可以通过将DOM元素的overflow CSS属性设置为hidden和position fixed来防止其滚动。例如：

.disable-scroll {
    /* disable scrollbar on both x and y axis */
    overflow: hidden;

    /* disable scrollbar on x-axis only */
    overflow-x: hidden;

    /* disable scrollbar on y-axis only */
    overflow-y: hidden;

    /* disable scroll */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* OPTIONAL: none of dom element will be click-able */
    pointer-events: none;
}

- ifadey

嗨，感谢您的快速回复。我的朋友为我编写了这个JavaScript代码，所以我不太确定在我的JS文件中应该添加在哪里。您能否 kindly 指导我一下？ - Hirohito Yamada

3

我会将html和body标签设置为overflow：hidden;，这样用户就不能滚动屏幕。

但是，如果您的模态框内容非常大，我建议为模态框添加可滚动的容器。您可以在此处查看我所说的示例：http://fortitude.io/javascript.html#js-modal

- lifeiscontent

3

在Chrome和Firefox浏览器中，简单地使用overflow: hidden;来隐藏滚动条是不行的。使用position: fixed;可以解决问题，但是这样做的副作用是在关闭模态框时可能会导致屏幕跳动。

以下方法可以在Chrome和Firefox下都隐藏滚动条：

.modal-open {
  -moz-appearance: menuimage;
}

.modal-open::-webkit-scrollbar {
   width: 0 !important;
}

然而，这只会禁用滚动条，使用按键/文本选择/触摸手势仍然可以滚动页面。

一种可能的解决方法是将主体内部元素的高度设为零，例如所有div元素。

.modal-open div {
  height: 0px;
}

- lofihelsinki

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- IvanJ · Accepted Answer

在你的 CSS 中添加以下规则：


        body.modal-open {
            overflow: hidden;
        }

此外，使用一些 jQuery 代码，当模态框打开时，将 .modal-open 类添加到 <body> 标签中，当它关闭时，将其移除。

$("#myModal").on("show", function () {
  $("body").addClass("modal-open");
}).on("hidden", function () {
  $("body").removeClass("modal-open")
});