滚动位置(scrollTop)硬件是否在浏览器中加速？

Question

我最初的猜测是答案是否定的,因为这里提供了证据:

https://github.com/inuyaksa/jquery.nicescroll/wiki/Native-scroll-vs-Hardware-accelerated-one

我可以定性地注意到"硬件加速"版本在我的计算机上滚动得更顺畅.我运行一个120Hz的显示器.这表明第二种方法更快,更有效.

对于HTML元素,例如

<div id="a" style="overflow-y: hidden; height: 100px">
    Content <em>which exceeds 100px in height</em>
    <img src='lolcat.png' alt='lolcat'/>
</div>

我想直接实现3D硬件加速布局的方法是渲染div的全高,然后将此输出作为全高度的纹理加载,然后用于渲染实际div的纹理坐标将显示一次只有100px.

我的问题与scrollTop理论如何在理论上做到这一点有关,但似乎目前通过使用TWO元素获得我描述的行为的可能性要大得多:

<div id="a" style="overflow-y: hidden; height: 100px; position: relative">
    <div style="position: relative">
        Content <em>which exceeds 100px in height</em>
        <img src='lolcat.png' alt='lolcat'/>
    </div>
</div>

而不是设置我的scrollTop属性,document.getElementById('a')而是将CCS3 -webkit/moz/ms/o-transform属性设置为具有相应的负Y轴像素值的3D值.

使用CSS3滚动的最有效方法是什么？特别是,如何构建我的DOM以最有可能获得最直接的滚动实现(滚动元素时不会重新绘制内部内容)？

更新:我一直在为Chrome使用一个非常漂亮的平滑滚动插件,它似乎使用JS在页面上分配scrollTop偏移来实现滚动渲染,这似乎表明如果这不是硬件加速,性能就不能t真正跟上屏幕刷新率(120Hz),没有大量的CPU使用率.尽管如此,这种猜测仍然极不科学.我在这一点上得出的结论是,浏览器可以自由地加速他们在合理范围内选择的任何内容,因此答案可能是响亮的.

Answer 1

根据您提到的页面,硬件加速取决于浏览器是否支持硬件加速.

带包装的Div可以加速.(如果浏览器支持它)

因此,我认为您嵌套两个div的想法将创建一种更容易实现您想要的方式.但回答你的问题,scrollTop只有在支持硬件加速的浏览器中加速硬件.

1. Firefox 4.0 beta 5支持硬件加速.
2. IE 9 beta支持硬件加速.
3. Chrome 6+支持硬件加速合成.

Safari和Opera尚未支持硬件加速.

这是根据2010年的这个页面.http://www.webmonkey.com/2010/09/a-guide-to-hardware-acceleration-in-modern-browsers/

据http://arstechnica.com/information-technology/2012/06/opera-12-arrives-with-webcam-apis-and-experimental-webgl-support/, 歌剧12支持硬件加速.

根据TechCrunch,Safari 5 for Windows支持硬件加速.

根据Apple Safari的网站,Safari 6支持硬件加速.

抱歉! 我有TechCrunch文章和Safari网站的链接,但我只能使用两个超链接.

编辑:

为了更好地回答这个问题,我补充说.使用CSS3滚动的最有效方法是overflow: scroll;或overflow-x: scroll;.该overflow:CSS属性是不是更有效的CSS scrollTop,因为scrollTop是一个jQuery标签,它使用JavaScript.所以使用scrollTop不是CSS,它是JavaScript.此外,使用CSS也是实现水平滚动的最直接的方法,因为它不需要导入jQuery库或启用JavaScript.

我完全同意你说通过使用两个div标签和CSS而不是使用jQuery/JavaScript 来获得你描述的行为的机会要大得多.

除非您希望能够自动滚动到其他位置,否则在使用scrollTop时可以使用按钮或链接有效滚动到其他位置.

$(document).ready(function() {
    $('a[href=#top]').click(function(){
        $('html, body').animate({scrollTop:0}, 'slow');
        return false;
    });
});

这个jQuery代码使用scrollTop所有<a href="#top">top</a>动画滚动到顶部而不是跳跃.使用CSS滚动时,您不会获得这些动画卷轴.此外,您可以使用此方法通过设置多个div标签的ID 并编辑上述代码来水平或垂直滚动​​到不同的点以满足您的需要.这是来自http://www.electrictoolbox.com/jquery-scroll-top/.