javascript - 防止固定主体滚动到页面顶部

Question

我有一个按钮可以防止默认并打开模式。我试图让模态背后的背景保持固定，然后在模态关闭时取消固定。

我遇到的问题是当我将背景设置为固定时:

if (modal.classList.contains('is-active')) {
    body.style.position = 'fixed';
}

后台页面滚动到顶部，当模式关闭时，用户不在他们离开的地方。为了改进用户体验，我希望用户返回到他们离开的地方，所以在我的函数中我有:

const scrollY = window.pageYOffset;

if (modal.classList.contains('is-active')) {
    body.style.position = 'fixed';
} else {
    body.style.position = '';
    window.scrollTo(0, scrollY);
}

上面的代码在用户点击按钮打开模式时被触发。

但是，由于在模式关闭时重新加载函数，并且 body 位置“固定”已将滚动位置更改为 0，这将覆盖 scrollY。

因此，这可以通过以下两种方式之一解决:

a) 如何在更新正文样式位置时防止滚动位置更改为 0，或者

b) 如何保持 scrollY 的值？

Answer 1

我的最终解决方案(感谢上面的回答让我走上了正确的道路，以及 @Constantin Groß 的评论):

在我的函数之外我声明了 var scrollY;

// Locks the background and makes it not scrollable
if (modal.classList.contains('is-active')) {
    scrollY = window.pageYOffset;
    console.log("open " + scrollY);
    body.classList.toggle('popup-open--body');
} else {
    console.log("closed " + scrollY);
    body.classList.remove('popup-open--body');
    window.scrollTo(0, scrollY);
}

在我的 CSS 中:

.popup-open--body {
  overflow: initial;
  position: fixed;
  width: 100%;
}