Javascript 如何记住溢出的滚动位置：滚动div？

我有一个容器div what overflow-y:scroll

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

我希望在单击后退按钮或刷新时记住容器的滚动位置

所以我得到了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;
   } 
}

---

有两件事你想做

离开页面时保存当前滚动位置

在页面加载时跳转到该位置

保存当前位置：

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

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

检索位置：

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

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

你可能想读一下这本书

让我们仔细看一下保存部分：

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

// 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\u containe'）

，但在CSS中使用的是

.contents\u container{…}

。JS版本末尾缺少

r

。始终确保HTML/CSS/JS中的选择器相同

也许可以尝试使用

窗口。会话存储

？然后是

窗口。scrollTo

如果定义了该值，则需要更新scroll上的值