javascript - 浏览器视口外的模态弹出窗口

Question

我的网站上有一个弹出窗口进行一些注册。当此弹出窗口在手机上打开时，浏览器视图端口过高，并且一些内容超出了它。

当我尝试向下滚动时，它会滚动背景。如果我用 锁定背景overflow-y: hidden，则根本不会滚动。

弹出窗口随窗口滚动，锁定在同一位置。我不想将位置锁定到页面顶部，并让它始终出现在视口的顶部，但应该可以滚动查看其所有内容。

有谁知道如何解决这一问题？

Answer 1

您可以使用media类型为移动设备、平板电脑等编写 CSS 规则。例如，如果您希望在模态内容中滚动，您可以执行以下操作：

@media (max-width: 767px) {
    .modal-content { overflow-y: scroll; }
}

Answer 2

查看Bootstrap 模态管理器大示例。他们删除了正文中的溢出（溢出：隐藏）并为模态提供了全宽/高度包装，此包装具有溢出：自动；这使得外观比正文页面是静态的，并且页面滚动仅移动模式。

Answer 3

如果容器超过视口高度，这将显示一个垂直滚动条：

.some-modal {
    maxHeight: 100vh;
    overflowY: 'auto';
    overscrollBehavior: 'contain'; /* <-- nice to have but not required */
}