Web 技术研究所

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

Chrome中因存在fixed元素产生的滚动条BUG

  Chrome的滚动条BUG真是对我们“无微不至”。之前的文章中已经提到过Chrome刷新时的滚动条重置问题了,今天又遇到了一个滚动条BUG。只要存在fixed元素,并且页面的长度是由程序动态控制的,那么滚动条的渲染就会出现在错误的位置。
  以下测试为BUG重现,测试环境 Chrome 31.0.1650.63 m @ Windows 7
  打开这个测试页面后点击上面的按钮会出现滚动条,因为body的长度被修改了,这时的滚动条是可以正常使用的。把滚动条滚动到页面底部后再刷新页面,然后再次点击页面上的按钮。这时依然产生滚动条,但它就不受鼠标滚轮控制了,除非直接用鼠标去拖动。
<style>
input {position:fixed;left:16px;top:16px;}
</style>
<input type="button" value="test" id="test" />
<script>
test.onclick=function(){
  document.body.style.height="2000px";
  test.onclick=null;
};
</script>
  实际上即使一开始没把滚动条拖动到底部而是其它任何位置,刷新之后重新产生的滚动条位置的计算也依然有错误。上面的测试是在鼠标事件中修改body的高度,实际上即使不是直接修改body高度,而是往body里面添加元素,使其撑开原来的高度,也会产生同样的问题。只有在load或者DOMContentLoaded事件中操作产生的滚动条才会被正确计算。
  目前我使用的解决办法是这样的:
if(window.webkitURL)
document.addEventListener("DOMContentLoaded",function(){
  var s,e=document.getElementById("test"); //获取要修复的fixed元素
  //判断滚动条初始是否存在
  s=document.body.scrollHeight>document.documentElement.clientHeight;
  //如果初始不存在滚动条则将元素初始化为absolute
  if(!s)e.style.position="absolute";
  //添加scroll事件监听
  document.addEventListener("scroll",function callee(){
    //如果初始存在滚动条,那么只要在第一次scroll时重新计算即可
    if(s)document.body.scrollTop--,document.body.scrollTop++;
    //如果初始不存在则在第一次scroll时把元素调回fixed
    else e.style.position="fixed";
    //注销这个scroll事件
    document.removeEventListener("scroll",callee);
  });
});
网名:
3.80.32.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^