jquery - 有没有办法强制``元素尊重偏移？（即用户当前滚动位置）何时触发“自定义框”模式？

Question

我正在使用custombox.js和 BS4，但浏览器中的滚动条有点困难。

好的，让我解释一下；

我实际上有一个 BS4 模态（除了它是一个自定义框。它们非常相似。）使用 BS4 时，有一个类在打开模态时应用于 body 标签，该类如下；

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

实际上，此类在模式打开时隐藏了浏览器滚动功能。

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

因此，我写这篇文章是为了解决这个问题；

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

此类有效地保持滚动条可见，同时将用户锁定到位。（即禁用滚动。）

问题

不幸的是，当这个类被模态触发应用时，它会将用户跳转到页面的最顶部。确实很不受欢迎……

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

问题：有谁知道我可以在不使问题过于复杂的情况下达到我想要的结果的方法吗？

标签： jqueryhtmlcssbootstrap-4

Answer 1

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

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

body{overflow: scroll !important}

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