可以从滚动事件添加“后退”历史记录项吗？ [已解决（Edge 和 Brave 除外）]

Question

我花了几个小时才找到这个例子：

https://kitaitimakoto.gitlab.io/scrollspy-example/index.en.html#smoothscroll

它做了我想做的两件事：

1. 当您单击菜单中的某个项目时，它会平滑地滚动到该部分。
2. 当您滚动时，它会更改 URL！

我想补充一件事。我想做到这一点，当用户点击后退按钮时，不是将他们从页面上移开，而是将他们带到上一部分。现在，如果他们单击菜单中的某个项目，它就已经执行了此操作。但是，如果他们只是向下滚动，即使 URL 正在更改，如果他们返回，也会将他们带到上一页。

这是仓库：https://gitlab.com/KitaitiMakoto/scrollspy-example/-/blob/master/README.markdown?ref_type=heads

顺便说一句，如果您想尝试自己运行它，您可能需要运行：

npm install --save sanitize.css npm install --save 交叉点观察者

感谢您的帮助！

Answer 1

只用了1行代码：

  onTargetChange(event) {
    
    var newTargetId = event.detail.newTarget.id;
    this.links[event.detail.oldTarget.id].setAttribute('aria-selected', 'false');
    this.links[newTargetId].setAttribute('aria-selected', 'true');
    this.element.dataset.scrollspyTarget = newTargetId;


    history.pushState(null, null, location.href); // added this 
  }

它在 Edge 和 Brave 中不起作用，但在 Chrome 和 Firefox 中起作用。如果有人知道如何在 Edge 中修复它，那就太酷了，但我很高兴生活在一个只有 %5 的人仍在使用 Edge 的时代。我希望网络开发者能够团结起来，每年抵制 Edge 一天 - 用如何下载 Chrome 或 Firefox 的说明来代替。由于微软想要捆绑一个 25 年来都无法正常工作的浏览器，而浪费的时间总量是荒谬的。我以为我们已经解决了浏览器特定的错误，但即使到了 2024 年，Internet Explorer 仍然是一坨屎。我不在乎你是否称其为“Edge”，它唯一的好处就是在你全新安装 Windows 后下载 Chrome。当我写这篇文章时，它确实冻结了，我不认为它“冻结”，我认为它在我的“第二个显示器”上打开了一个模式，即一台已关闭的电视。所以我必须CTRL+ALT+删除它。整个事情很愚蠢 - 甚至很难找到您正在使用的版本，因为它不是在“帮助”菜单中，而是在“设置”中。现在的版本如何设置？我敢打赌，从事它工作的人甚至都不会使用它。 /咆哮