模式打开时保持背景滚动

Question

我在这个网站和其他网站上浏览了许多其他问题。 他们有同样的问题，但是他们的解决方案都不适合我。 我看到的最常见的解决方案是从a标签的href属性中删除# ，但是我的模式是在单击div时打开的，而其他模式的情况不同，但都不适合我的情况。

发生的是，当我向下滚动并单击一个div打开一个模式时，该模式成功打开。 在此之前，我遇到一个问题，当我打开模态时，添加了另一个滚动条，并且根据我之前的问题的回答，它说是这样做的：

body.modal-open {
    overflow: hidden !important;
}

我做到了，它起作用了，但是现在当我打开它时，背景滚动到顶部。 我知道发生这种情况的原因是position: fixed属性。 我可能需要为其指定top属性以保持其滚动位置，但是每次top偏移都会发生变化，因此top属性的常数值不是恒定的。

我寻找了页面的滚动偏移量，发现可以使用window.pageYOffset来计算用户滚动了背景多少。 我试图通过执行以下操作将pageYOffset的值pageYOffset到控制台：

window.onscroll = function() {
    console.log(window.pageYOffset);
}

但是每次我滚动它时，它都会连续向控制台记录0 。

我现在不知道如何解决该问题。 请帮忙。 谢谢。

小提琴。

Answer 1

更改

body.modal-open {overflow: hidden!important;}

至

body.modal-open { overflow: auto; }

然后，您需要将锚点从<a href="#">更改为<a href="javascript:void(0)">或更改为适当的锚点，而不仅限于页面顶部。

Answer 2

我想我终于明白了你的意思。 您单击类别链接打开模式，对吗？

如果是这样，问题是您的<a href="#">周围有一个空链接，如果href为空，则浏览器的默认行为是滚动到顶部。

例如，如果将链接的href更改为<a href="http://stackoverflow.com"> ，则它不会滚动到顶部，但是当然会离开您的网站。

如Tom所说，您也可以将href也更改为<a href="javascript:void(0)"> ，但是它需要除#其他内容，否则默认情况下它将滚动到顶部。

或者，您可以添加一个简单的jQuery脚本，但是为此，您需要为此类的每个链接提供一个特定的类，如下所示：

<a class="modal_popup" href="#">

并添加以下脚本：

$('.modal_popup').click(function(e) {     
     e.preventDefault();
});

或者你可以简单的写<a href="#!"> ，增加你的哈希键后喜欢的任何字符，只要它是不存在的ID在你的DOM。