JavaScript 避免在 position:fixed 后重置到页面顶部答案

【问题标题】：JavaScript avoid reset to top of page after position:fixedJavaScript 避免在 position:fixed 后重置到页面顶部
【发布时间】：2021-05-06 00:24:11
【问题描述】：

我有滚动分页到我显示一些图像的应用程序。当我单击图像时，会打开一个模式以全屏显示图像。为了防止在正文中滚动，我为html, body 标签提供了以下类。问题是，如果我向下滚动 40 个图像选择一个图像，并且在我关闭该模式后，图像源再次从页面顶部开始显示。我想避免这种情况从我单击该图像之前的位置继续。

.item-mdl-plh {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

我在这里找到了类似的问题，并实现了这个但它不起作用，scrollTop 总是从提要 div 元素返回 0。

How do I prevent custom full screen from resetting the scroll position?

和其他人在 jQuery 但不明白：

Avoid reverting to top of page when setting <body> position to fixed with jQuery

我想了解如何使用 vanilla JavaScript 实现我想要的这种行为。

【问题讨论】：

需要一些更可行的代码来分析问题。

标签： javascript html css

【解决方案1】：

如果你决定使用scrollTop 方法，你可以使用这个。

我不知道为什么，但 scrollTop 在 chrome 中总是返回 0。但pageYOffset 返回预期值。

所以你可以使用这样的东西。

let scrollTop = 0;

function open_modal() {
    scrollTop = pageYOffset || document.documentElement.scrollTop || 0;
    // Modal
}

function close_modal() {
    // Remove modal
    scrollTo(0, scrollTop); // After removing fixed position from body, scroll back to last recorded posititon
}

【讨论】：