首页 文章

重新粉刷之后或之前“onscroll”被解雇？

提问于
浏览 次
7

我在div元素上有一个滚动条 .

在许多浏览器上（我在MacOS和Linux上的Chrome和Firefox的最新版本上进行了测试），似乎浏览器确保在滚动重绘触发之前调用绑定到onscroll的代码 .

换句话说，滚动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（http://jsfiddle.net/m2E65/2/）延迟onscroll一样糟糕：

$('#container').scroll(function() {
    window.setTimeout(onscroll, 0);
});

在这个完全相同的浏览器上，甚至使用requestAnimationFrame，就像http://jsfiddle.net/m2E65/4/闪烁一样严重（见下文）

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);

我的问题是：

  • 这是否有规格？

  • 有没有办法确保在所有浏览器上，代码将在重绘前运行？

  • 加分点：这种行为有多罕见？

javascript dom scroll browser

1 回答

  • 3

    1.出自Document Object Model (DOM) Level 3 Events Specification W3C文件：

    用户代理必须在滚动文档视图或元素时调度此事件 . 滚动发生后将调度此事件类型 .

    我对这两句话的解释是，在滚动过程完成包含重新绘制后，浏览器必须调度 scroll 事件 .

    2.我认为没有办法确保在所有浏览器上，代码将在重绘前触发 . 也许你可以尝试捕捉用户可以滚动的所有方式，我想到的是自发的：

    • 鼠标滚轮 - > wheel 事件

    • 选择文字 - > mousedown

    • 使用滚动条 - >你可以希望 mousedown 会发射 .

    你的第一个小提琴在我身上闪过：

    • Safari 7.0.1
      iOS 7上的

    • Safari

    • 正如你在Ubuntu的Chrominum中所说的那样

    它没有闪烁：

    • Firefox 27.0 Mac和Ubuntu

    • Opera 19.0 Mac

    • Chrome

    现在它认为特别是WebKit-Browsers（Chrome除外）在调用 scroll 事件之前没有重新绘制，并且没有好办法防止这种情况发生 .

    回复于

相关问题