Web 技术研究所

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

Chrome刷新时滚动条被重置的BUG

  页面刷新之后,滚动条应该是还原到页面刷新之前的位置。但是在一些特殊的情况下Chrome的滚动条在刷新时无法还原到上次停留的位置。我也没搞明白这个问题产生的原理,也有可能是我的测试环境问题。但至少先记录一下这个问题,顺便说一说它的解决方法。
  在加载文档时候如果通过JavaScript创建了SCRIPT标签,并很快加载了一个脚本,这时在Chrome上滚动条位置就变得无法还原到滚动之前的位置。这里加载的速度很关键,如果加载的慢就不会有这样的问题。所以慢的网络环境反而不容易出现这种问题。下面的测试为了保证加载的速度,加载了自身文件来测试。 /*
<script>
function loadScript(){
  var head=document.documentElement.firstChild;
  var script=document.createElement("script");
  script.src=location.href;
  head.insertBefore(script,head.firstChild);
};
loadScript();
//setTimeout(loadScript);
</script>
<body style="height:1000px;"></body>
*/
  这个代码就会有Chrome滚动条无法还原的问题,把滚动条拖到底部后刷新,滚动条就被重置到顶部。如果把这个加载的代码延迟执行就会有所改善,但未必能解决问题。唯一可以保证没问题的就是让代码在DOMContentLoaded之后再加载。
  问题虽然很容易解决,但是我没搞明白它产生的原因。我做了两个测试,一个是在服务器程序上sleep,让页面DOMContentLoaded延迟完成,另一个是在SCRIPT元素加载的文件的服务器程序上插入sleep,让SCRIPT延迟加载成功。这两个测试都可以正常让滚动条还原位置,所以这个问题的产生不是在脚本和文档加载的时间差上。
  在Firefox和IE上都不存在这个问题,所以它应该是Chrome的BUG,我也没有太多时间去深入研究这个问题了。

  测试于:Windows 7 & Chrome 30.0.1599.101 m
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^