Question

我有一个容器 div，什么溢出-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;
   } 
}

Answer 1

你想做两件事。

离开页面时保存当前滚动位置
在页面加载时跳转到该位置

保存当前位置：

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

检索位置：

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 中的选择器相同！

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

1 个答案: