javascript – 重绘后或之前“onscroll”?

前端之家收集整理的这篇文章主要介绍了javascript – 重绘后或之前“onscroll”?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在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 v​​28上,它确实闪烁.几乎和我们使用setTimeout(http://jsfiddle.net/m2E65/2/)延迟onscroll一样糟糕:

$('#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);

我的问题是:

>这有规格吗?
>有没有办法确保在所有浏览器上,代码将在重绘之前运行?
>奖励点:这种行为有多罕见?

解决方法

1.在 Document Object Model (DOM) Level 3 Events Specification W3C文件中:

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.

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

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

>鼠标滚轮 – >车轮事件
>通过选择文本 – >鼠标按下
>使用滚动条 – >你可以希望mousedown会发射.

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

> Safari 7.0.1
> iOS 7上的Safari
>正如你在Ubuntu的Chrominum中所说的那样

它没有闪烁:

> Firefox 27.0 Mac和Ubuntu
> Opera 19.0 Mac
> Chrome

现在它认为特别是WebKit-Browsers(Chrome除外)在调用scrollevent之前没有重新绘制,并且没有好办法防止这种情况发生.

原文链接:https://www.f2er.com/js/158038.html

猜你在找的JavaScript相关文章