JavaScript事件检测Firefox和IE Edge浏览器在Windows上哈希URL的滚动重定位

Question

在尝试对一些滚动脚本进行调整以执行某些页面上的“跳转到”链接时，我注意到如果页面URL中包含哈希标签，则在加载页面后在地址栏上按回车键时，不同浏览器的行为是不同的。

例如，如果您加载了一个带有哈希标签的页面，然后从目标元素滚动，我注意到在Firefox和IE上，如果将光标放在地址栏上并按回车键，则页面将移动回具有与哈希标记相同的id属性的HTML元素，但页面不会重新加载。

我还注意到，在这种情况下，既不会触发popstate事件，也不会触发hashchange事件。最可能会触发scroll事件，但我们如何知道这不是用户滚动而是浏览器重置其位置？

有没有办法在浏览器中检测此类事件？鉴于这超出了视口，我有点好奇。但是我有一个场景，我想根据页面向上或向下滚动来重新定位菜单。

为了尝试解释我正在寻找什么：

1. 带有hashtag #test和元素<div id="test">的页面
2. 按下F5，页面会定位到<div>所在的位置
3. 向上或向下滚动
4. 进入地址栏并按下回车键
5. ---- 寻找一个事件来检测前面的操作 ---
6. 页面会定位到<div>所在的位置

JSBin中的示例（在Firefox中打开）：

http://jsbin.com/rifikereze/1/edit?html,js,output

输出：

http://output.jsbin.com/rifikereze/1#test2

1. 在Firefox中打开控制台
2. 确保在Firefox设置中启用“持久日志”以在页面重新加载后保留日志
3. 按F5（您应该会看到一个控制台消息“已重新加载”）
4. 现在尝试移动页面，将光标放在地址栏中并按Enter键
5. 您将看到页面不会重新加载

除滚动事件外，我们如何检测这些事件？

请确保在Windows上使用Firefox进行尝试复制。其他操作系统似乎具有其他行为。

- Nicolas Bouvrette

---

@dandavis 我正在寻找一种方法来识别滚动是从这个上下文触发的，以避免菜单栏隐藏。此外，这不是由视口中的任何内容触发的，因此我不确定如何使用onfocus事件。 - Nicolas Bouvrette

@NicolasBouvrette 如果你的代码实现了滚动功能，当然你应该知道在你的代码中哪里，否则就必须是用户在滚动。 - King King

@guest271314，我试图解释的是Firefox和IE的行为。当您在带有URL哈希的页面上时，在页面加载后，如果您在该页面上滚动并返回地址栏并按Enter键，则浏览器将重新定位页面而无需重新加载。让我更新问题以尝试澄清这一点。 - Nicolas Bouvrette

@guest271314 我猜Windows系统的行为有所不同，变量在我的环境中没有递增。在这里找到了更多证据：https://dev59.com/l5rga4cB1Zd3GeqPiSFs - Nicolas Bouvrette

@guest271314 感谢您的尝试 - 我怀疑我的回答没有得到任何回应。我只是在寻求确认 :) - Nicolas Bouvrette

Answer 1

鉴于没有答案，我推测的答案是No。

无法检测使用URL和地址栏中的片段标识符（也称为hash）重新定位浏览器的方法。

此外，浏览器似乎有不一致的行为：

1. Linux上的Firefox与Windows上的Firefox行为不同（它重新加载页面）。
2. Chrome似乎忽略重新定位，除非在卸载前将页面位置设置回顶部位置。
3. 跨浏览器是否重新加载或重新定位没有标准。

检测片段标识符重新定位的唯一安全方法是在加载页面时进行。

- Nicolas Bouvrette