jquery - 有没有办法强制 `` 元素遵守偏移量？ (即用户当前滚动位置)何时触发 'custombox' 模态？

Question

我正在使用 custombox.js连同 BS4，我在使用浏览器中的滚动条时遇到了一些困难。

好吧，让我解释一下；

我实际上有一个 BS4 Modal(除了它是一个 Custombox。它们非常相似。)对于 BS4，有一个类在打开模态时应用于 body 标签，该类如下所示；

/* BS4 Class */
.modal-open {
  overflow: hidden;
}

Effectively this class hides the browsers scroll feature while the modal is open.

遗憾的是，这不是我想要的，因为它会在打开或关闭模式时导致一些难看的抖动。

因此，我写这篇文章来解决这个问题；

/* Custom Box Lock */
.custombox-lock {
  position: fixed;
  left: inherit;
  overflow-y:scroll !important;
}

这个类有效地保持滚动条可见，同时将用户锁定在适当的位置。 (即禁用滚动。)

问题

不幸的是，当模态触发应用此类时，它会将用户跳转到页面的最顶部。确实非常不受欢迎......

因此，我尝试使用 inherit: left;，希望我可以强制 body 元素遵守滚动位置，但遗憾的是，我没有这样的运气。

Question: Does anyone know of a way I could achieve my desired result, without over complicating the issue?

Answer 1

如果你认为 .modal-open { overflow: hidden; } 是导致问题的原因，那你为什么不把它覆盖到 .modal-open { overflow: scroll !important; }？ Bootstrap 类可以像那样被覆盖。

但是......我不认为你的问题来自那一行。这只是将溢出隐藏在模态本身内。您想要做的是始终显示页面的滚动条。你可以通过添加

正文{溢出:滚动!重要}

到您的代码。这使得滚动条始终存在，并且如果您打开模式，则不会发生屏幕调整。