时间戳

首页 > 解决方案 > JavaScript 避免在 position:fixed 后重置到页面顶部

javascript - JavaScript 避免在 position:fixed 后重置到页面顶部

问题描述

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

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

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

如何防止自定义全屏重置滚动位置？

和其他人在 jQuery 但不明白：

使用 jQuery 将 <body> 位置设置为固定时避免返回到页面顶部

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

标签： javascripthtmlcss

解决方案

如果您决定使用该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
}

推荐阅读