Chrome 滚动条冻结现象

提醒:本文最后更新于 3769 天前,文中所描述的信息可能已发生改变,请谨慎使用。

上次写过 Chrome 31 的一个离奇 Bug,官方很快就修复了。今天要说的这个现象(暂且称之为现象吧,尽管我觉得是 Bug),很久以来一直存在,我忍了好久,今天终于决定写出来一吐为快。

现象描述

如果页面上,有一部分内容是异步生成的,那么滚动页面到比较靠下的位置后,再刷新页面。这时候,有很大概率页面会出现滚动条冻结的现象:尽管滚动条存在,但无法通过鼠标滚轮来滚动页面。只能点一下滚动条,或者拖动文字让页面产生滚动,这个冻结现象才会消失。

这个现象描述起来比较复杂,大家可以实际感受下:点这里

Demo 里,我用 setTimeout 来模拟实际场景里的 Ajax 或者 JsonP 异步加载。

几点说明

我测试了手头的 Chrome 30 和 31,都能稳定复现这个现象,更老版本的 Chrome 我没有测。而其他浏览器,如 Firefox、Safari、IE 各版本都没问题。

Mac 和 Windows 平台下的 Chrome,都存在这个问题,但是现象略有不同: Windows 下是完全冻结;Mac 没有完全冻结,但也挺奇怪的。

另外,顶部那个 fixed 条不是产生这个现象的必要条件,但加上之后,坏的概率比较大,在我这边基本每次都坏。

最后,这个现象产生跟异步生成内容的时机有关。个人猜测,刷新页面后,Chrome 会尽可能尝试还原页面滚动条位置。由于页面一开始没有那么高,所以位置还原失败导致问题的产生。

最后

我尝试页面加载完 setTimeout 一段时间后,先让页面滚动到 (0, 1),再回到 (0, 0),大部分时候可以解决这个问题,但 setTimeout 的时长不好控制。另外,由于这个现象只存在于 Chrome,又很诡异,我也不想专门为解决这个问题引入额外逻辑。大家遇到过这个问题没,怎么处理的?

PS:Chrome 尝试还原滚动条这个看似「人性化」的特性,还会引发其他问题:例如点击我博客页面底部的「Switch Theme」(注:博客改版,现在没这个功能了),页面刷新后 HTML 内容都变了,但 Chrome 仍然会尝试还原滚动条位置,所以页面被自动定位到中间了,很莫名其妙。

update:直到 Chrome 34.0.1788.0 dev,这个问题依旧没有解决。于是去提了个 bug,已确认。@Jan 19, 2014

本文链接:https://imququ.com/post/chrome-scrollbar-freeze.html参与评论 »

--EOF--

提醒:本文最后更新于 3769 天前,文中所描述的信息可能已发生改变,请谨慎使用。

专题「浏览器」的其他文章 »

Comments