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;
}

这很好，我对此效果非常满意。但是，全视口包装器元素的意外副作用是，浏览器在刷新或后退按钮上滚动回其先前位置的通常行为不再起作用。就浏览器而言，它根本没有滚动，因为所有滚动都在包装器的溢出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;
});

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

1 个答案: