jquery模态防止滚动并阻止在模态打开时移回页面顶部

Question

有两个问题都是独立记录良好的，但解决方案似乎与我所说的相互排斥。

首先，当我们打开一个模态时，我们希望能够阻止屏幕滚动，这可以通过做类似于此的操作来阻止：disable browser scrolling while jQuery UI modal dialog is open

还有第二个问题，即当模态打开时，屏幕被强制滚动回到页面顶部，可以通过使用以下方法来阻止：Prevent CSS Modal from scrolling to top

即。要解决第一个问题，将以下内容添加到body css中可以解决问题：

overflow:hidden;

并解决第二个问题，将以下内容添加到body css解决了这个问题：

overflow:visible; 

我面临的问题是我希望两者都是真的。当模态打开时，我希望禁用滚动，并且我希望页面冻结在用户滚动到的位置，而不是跳回到顶部。这些解决方案都不会同时允许这两种行为。

是否有人知道可以同时解决这两个问题的解决方案？

Answer 1

我的解决方案： 防止滚动。打开对话框时，向类添加一个类，如：

.modal-open {
    overflow: hidden;
}

关闭对话框时删除课程。

防止移动顶部。在jquery中，在打开对话框的函数中，添加preventDefault