防止HTML5历史记录popstate事件触发浏览器滚动

Question

防止HTML5历史记录popstate事件触发浏览器滚动

91

当“popstate”事件发生时，是否可能防止文档默认滚动行为？我们的网站使用jQuery动画滚动和History.js，状态更改应该通过pushstate或popstate将用户滚动到页面的不同区域。问题是浏览器在popstate事件发生时自动恢复先前状态的滚动位置。已尝试使用设置为100％宽度和高度的容器元素，并在容器内滚动内容。我发现这个方法的问题在于滚动文档似乎并不像滚动容器那样平滑，特别是如果使用了很多css3，如box-shadows和gradients。还尝试了在用户发起滚动期间存储文档的滚动位置，并在浏览器滚动页面（在popstate时）后恢复它。这在Firefox 12中运行良好，但在Chrome 19中存在闪烁，因为页面被滚动和恢复。我认为这与滚动和滚动事件被触发之间的延迟有关（其中恢复滚动位置）。Firefox在触发popstate之前滚动页面（并触发滚动事件），而Chrome首先触发popstate然后再滚动文档。我看过的所有使用历史API的网站都使用类似上述方法的解决方案或者在用户返回/前进时忽略滚动位置更改（例如GitHub）。是否可能在popstate事件上完全防止文档滚动？

- Alex Malet de Carteret

你可能会在设置滚动位置后读取元素尺寸（以强制页面回流）方面取得一些成功。例如：document.body.clientHeight，但我没有看到它在所有浏览器中都能正常工作。 - Sean Hogan

如果您操纵了文档的滚动功能，那至少是我会开始的地方。这里有一个解决办法：https://dev59.com/jmw05IYBdhLWcg3wxkqr - Jeff Wooden

11个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dan Barzilay · Answer 1

可能想试一下这个？

window.onpopstate = function(event) {
  return false;
};