我有一个带滚动条的div元素。
在许多浏览器上(我在MacOS和Linux上测试了最新版本的Chrome和Firefox),似乎浏览器确保在滚动触发重绘之前调用绑定到onscroll的代码。
换句话说,当滚动时,以下jsfiddle示例不会闪烁或闪烁:http://jsfiddle.net/m2E65/1/
var onscroll = function() {
var y = $("#container").scrollTop() + 30;
var z = 0
for (var c=0; c<y*10000; c++) {
z+=c;
}
$("#label").text("bocal : "+z);
$("#label").css("top", y);
};
$('#container').scroll(onscroll);
然而在Ubuntu上的Linux Chromium v28中,它会闪烁。几乎像我们使用setTimeout延迟onscroll一样严重(http://jsfiddle.net/m2E65/2/):
$('#container').scroll(function() {
window.setTimeout(onscroll, 0);
});
在同一个浏览器上,即使像http://jsfiddle.net/m2E65/4/中使用requestAnimationFrame,闪烁问题仍然存在(见下文)。
var onscroll = function() {
var y = $("#container").scrollTop() + 30;
var z = 0
for (var c=0; c<y*10000; c++) {
z+=c;
}
$("#label").text("bocal : "+z);
$("#label").css("top", y);
window.requestAnimationFrame(onscroll);
};
window.requestAnimationFrame(onscroll);
我的问题是:
- 这个有规范吗?
- 有没有办法确保在所有浏览器上,代码在重绘之前运行?
- 额外加分:这种行为有多少罕见?