跨页面加载记忆滚动位置 | CSS-Tricks

Hakim El Hattab 在推特上发布了一条关于静态网站的非常棒的小型 UX 增强功能，该网站包含可滚动的导航侧边栏。

👀 如果您的静态网站具有可滚动的侧边栏，那么记住跨页面加载的滚动位置真的很有帮助。

(左侧为默认，右侧为记忆) pic.twitter.com/bLgtILP1JP
— Hakim El Hattab (@hakimel) 2020年5月18日

诀窍是在页面退出之前将滚动位置放入 localStorage 中，并在加载时获取该值并滚动到该位置。我将从推文中重新键入它...

let sidebar = document.querySelector(".sidebar");

let top = localStorage.getItem("sidebar-scroll");
if (top !== null) {
  sidebar.scrollTop = parseInt(top, 10);
}

window.addEventListener("beforeunload", () => {
  localStorage.setItem("sidebar-scroll", sidebar.scrollTop);
});

令人惊讶的是，您不会看到滚动位置错误的闪现。我想知道为什么？也许这与浏览器现在正在进行的精美绘制保持功能有关？不确定。

Martin Kross

# 2020年7月9日

这些技巧使您的静态网站的行为更像单页“应用程序”，这很棒。这应该与 turbolinks/quicklink 等工具很好地配合使用。

Sora2455

# 2020年7月9日

如果您希望此技巧在移动浏览器中也能正常工作，最好使用 visibilitychange 事件而不是 beforeunload（它不会在移动设备上触发）。

wahoofive

# 2020年7月10日

您可能还需要保存当前时间，并在重新加载时进行检查。如果用户一周后返回您的网站，她可能不想跳到某个随机的滚动点。

Daniele

# 2020年7月11日

history.replaceState + history.state 对象 + beforeunload 事件也可以是一种很酷的方法。

Taufik Nurrohman

评论永久链接# 2020年7月14日

CMIIW，它将对所有页面启用。您可能需要为 localStorage 密钥设置命名空间（例如，来自 location.pathname），以确保滚动恢复仅应用于该页面。

新手

# 2020年7月11日

我们也可以在页面的顶部添加一个通知栏，让用户选择是否滚动。类似于 Microsoft Word 在重新打开一个关闭时具有非零滚动位置的长文档时所做的那样。

Rizky Saskia Putra

# 2020年7月12日

if('scrollRestoration' in history){
history.scrollRestoration='auto'
}

也许您可以尝试这段代码。

SeeDborg

# 2022年6月28日

嗨，我有点菜鸟，我对这个功能很感兴趣... 我尝试将代码放在页面的之间，但似乎不起作用...
有人能提供一个使用它的例子吗？
问候：)

此评论线程已关闭。如果您有重要的信息要分享，请联系我们。