如何记住 overflow:scroll div 的滚动 position？

Question

我有一个容器 div 什么溢出-y:scroll。

.contents_container {width: 100%; height: 100%; overflow-y: scroll; position: relative; float:left;}

我想在单击返回按钮或刷新时记住容器的滚动 position。

所以我得到了stackoverflow的帮助，但我不起作用。

这是我的脚本，你能解决这个问题吗？

window.addEventListener('popstate', onLocationChange);

function onLocationChange(e){

//if(document.location.test() or startsWith() .... 
// to fire only on desired pages
const container document.querySelector('.contents_containe');
const scrollTop = container.scrollTop;
    localStorage.setItem("container-scrollTop", scrollTop)
}

window.addEventListner("load", onPageLoad);

function onPageLoad(){
   const scrollTop = parseInt(localStorage.getItem("container-scrollTop"));
   if(scrollTop && !isNaN(scrollTop){
      const container document.querySelector('.contents_containe');
      container.scrollTop = scrollTop;
   } 
}

Answer 1

你想做两件事。

1. 离开页面时保存当前滚动 position
2. 在页面加载时跳转到 position

保存电流 position：

window.addEventListener("beforeunload", () => {
  localStorage.setItem("scrollPositon", document.querySelector(".contents_container").scrollTop);
});

检索 position：

window.addEventListner("load", () => {
  document.querySelector(".contents_container").scrollTop = localStorage.getItem("scrollPositon") || 0;
});

您可能想阅读localStorage API

让我们仔细看看保存部分： beforeunload

// event fires, if the user leaves the page
window.addEventListener("beforeunload", () => {
  // save an item to the users local storage
  localStorage.setItem(
    "scrollPositon", // item name/key
    document.querySelector(".contents_container").scrollTop // item value (scroll top position in this case)
  );
});

然后，当页面加载时，我们基本上会执行相反的操作：

// event fires when the page loads
window.addEventListner("load", () => {
  // setting scrollTop of container to:
  document.querySelector(".contents_container").scrollTop = 
    // whatever value the item with name/key scrollPosition in the local storage holds
    localStorage.getItem("scrollPositon") || 0; // or if it's not set, simply use 0 as fallback
});

---

编辑：我没有运行你的代码，但我注意到一个错误。 您在 JS 中使用document.querySelector('.contents_containe')但在 CSS 中使用.contents_container {... } 。 JS版本最后缺少r 。 始终确保选择器在 HTML/CSS/JS 中是相同的！