css - 使用 CSS 视差在刷新/返回时保持滚动位置

Question

在做 CSS 视差效果时，我使用了这样的 CSS:

#wrapper {
  perspective: 1px;
  transform-style: preserve-3d;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
}

.parallax-container {
  position: relative;
  transform: translateZ(-1px) scale(2);
  z-index: -1;
}

效果很好，我对效果非常满意。全视口(viewport)包装器元素的一个意外副作用是浏览器在刷新或后退按钮时滚动回其先前位置的通常行为不再有效。就浏览器而言，它根本没有滚动，因为所有滚动都是在包装器的 overflow-y 上完成的。

我能做些什么来解决这个问题，还是这种技术的局限性？

Answer 1

您可以尝试以下解决方案。它将包装器的滚动位置存储在 localStorage 中，然后在浏览器重新加载时恢复该位置:

window.addEventListener("unload", function(e) {
    var wrapper = document.getElementById("wrapper");
    var previousScroll = wrapper.scrollTop;
    window.localStorage.setItem("previousScroll",previousScroll)
}
document.addEventListener("DOMContentLoaded", function(e) {
   var wrapper = document.getElementById("wrapper");
   var previousScroll = window.localStorage.getItem("previousScroll")
    wrapper.scrollTop = previousScroll;
});