" onscroll"在重画之后还是之后开火？ [英] "onscroll" fired after or before repaint?

问题描述

我有一个div元素上的滚动条。

I have a scrollbar on a div element.

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

On many browsers (I tested this on recent versions of Chrome and Firefox on MacOS and Linux), it seems like the browsers make sure that code bound to onscroll is called before the repaint trigger by the scrolling.

换句话说，滚动 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 v​​28上，它会闪烁。几乎像我们使用setTimeout推迟onscroll一样糟糕（ http://jsfiddle.net/m2E65/2/）：

However on Linux Chromium v28 on Ubuntu, it does flicker. Almost as badly as if we deferred onscroll using setTimeout (http://jsfiddle.net/m2E65/2/) :

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

在这个相同的浏览器上，即使使用requestAnimationFrame，如 http://jsfiddle.net/m2E65/4/ 闪烁一样糟糕（见下文）

On this very same browser, even using requestAnimationFrame as in http://jsfiddle.net/m2E65/4/ flickers just as badly (see below)

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

我的问题是：

• 是否有规定？


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

奖励点：这种行为有多少？

推荐答案

1。 文档对象模型（DOM）3级事件规范 W3C文档：

1. Out of Document Object Model (DOM) Level 3 Events Specification W3C Document:

用户代理必须在文档视图或
元素已被滚动。此事件类型在 b $ b滚动已发生之后调度。

A user agent must dispatch this event when a document view or an element has been scrolled. This event type is dispatched after the scroll has occurred.

句子是浏览器必须在滚动过程完成（包括重绘）之后调度滚动事件。

My interpretation of this two sentences is that a browser has to dispatch the scrollevent after the scroll process completed inclusive repainting.

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

2. I don't think there is way to ensure that on all browsers, the code will fire before repaint. Maybe you could try catching all ways a user can scroll, spontaneous I thought of:

• 一个鼠标滚轮 - > 事件


• 通过选择文字 - > mousedown


• 使用滚动条 - >你可以只希望 mousedown 将触发。

• a mouse wheel -> the wheel event
• by selecting text -> mousedown
• using a scrollbar -> you can just hope that mousedown will fire.

3。您的第一个小提琴闪烁着我：

3. Your first fiddle flickers to me on:

• Safari 7.0.1


• iOS 7上的Safari


• 正如您在Ubuntu上Chrominum中所述

它不闪烁：

• Firefox 27.0 Mac和Ubuntu


• Opera 19.0 Mac


• Chrome

现在认为特别的WebKit浏览器（Chrome除外）在调用滚动事件，没有好的方法来防止这种情况。

Now it think that specially WebKit-Browsers (except Chrome) not repaint before calling the scrollevent and that there is no good way to prevent this.

这篇关于" onscroll"在重画之后还是之后开火？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！