Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

Chrome 滚动条自动恢复的坑

  现代浏览器上都对前进后退的行为加上了滚动条位置恢复的功能(虽然我没找到相关的规范在哪里定义)。但就这么个简单的功能 Chrome 也能捅出个 Bug 来。当我们手动设置滚动条位置(通过给 body.scrollTop 赋值)后,前进后退恢复的位置会无视我们手动设置的值。
  下面是重现问题的代码,测试于 OS X Yosemite 10.10 的 Chrome 45 以及某些安卓手机的 WebView,不确定 Windows 上能否重现。 <style>
aside { position: fixed; right: 1em; }
</style>
<aside>
  <button>scroll to top</button>
  <button>forward and back</button>
</aside>
<script>
document.onclick = function(e) {
  switch(e.target.textContent) {
    case 'scroll to top':
      document.body.scrollTop = 0;
      break;
    case 'forward and back':
      history.pushState(null, null, 'null');
      history.back();
  }
};
for(var i = 0; i < 1E3; i++) {
  document.write(i + '<br/>');
}
</script>
  由于上面代码的在线执行版是一个 blob 链接,pushState 会报跨域,所以请使用本地服务器测试。进入这么页面后将滚动条下拉,点击 forward and back 按钮会执行一个前进和后退,此时可以看到滚动条依然停在上一次滚动的位置,这个结果是正确的。然而再点击 scroll to top 按钮,滚动条被程序拖回顶部。再次点击 forward and back 按钮,此时预期的结果是滚动条停留在点击按钮前的位置,然而 Chrome 给出了错误的结果,滚动条回到了点击 scroll to top 前的位置,也就是恢复到最后一次真实操作滚动条的位置(程序设置的 scrollTop 被无视掉了)。
  这个 Bug 看似比较难重现,但实际上大部分单页应用中这样反复前进后退的并操作滚动条的场景是普遍存在的。所以如果产品的细节交互比较细致的话,这个坑可能会是个大问题。
网名:
3.80.32.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^