Question

我正在创建此网站，当您点击标题第二行最右端的链接时，模式窗口会显示youtube视频嵌入

当我滚动模态时，BODY也会滚动，我想停止它。我怎么能这样做？

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

Answer 1

在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")
});

Answer 2

在我到目前为止看到的其他修复程序中，当模态打开时，他们试图在“BODY”标记上应用固定定位，文档在最顶部滚动，因为默认情况下是位于前0位。我尝试了这一点，发现最好的解决方案是在html标签上隐藏隐藏，而不是在body标签上。这样我们就不需要任何固定的定位，你可以保持文档保持在模态打开之前的位置。

在我发现的修复中，您只需要应用类似

的内容

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

这就是修复。您可以继续创建一个CSS类，只需在打开或关闭模式框时在HTML上切换类。但这确实为我解决了这个问题

Answer 3

您可以通过将其溢出的CSS属性设置为隐藏并固定位置来阻止滚动任何DOM元素。例如：

.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;
}

Answer 4

我会将html和body标签设置为overflow: hidden;，这样用户就无法滚动。

但是，如果模态的内容非常大，我建议为模态使用可滚动的容器。你可以看到我在这里谈论的一个例子：http://fortitude.io/javascript.html#js-modal

Answer 5

简单overflow: hidden;并未将其剪切为Chrome或Firefox。使用position: fixed;有效，但作为副作用可以在关闭模态时跳转屏幕。

这将隐藏Chrome和FF的滚动条

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

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

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

一种可能性是将body内元素的高度设置为零，例如所有div

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

打开模态视图时禁用正文上的滚动

5 个答案: