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>
而不是设置document.getElementById(‘a’)的scrollTop属性,我将CCS3 -webkit / moz / ms / o-transform属性设置为具有相应的负Y轴像素值的3D值.
使用CSS3滚动最有效的方法是什么？特别是,我如何构建我的DOM,以获得最直接的滚动实现的最佳机会(滚动元素时不会导致重新绘制内容)？
更新：我一直在为Chrome使用一个非常好的平滑滚动插件,它似乎使用JS来分配页面上的scrollTop偏移来实现滚动显示,这似乎表明如果这不是硬件加速,t真的跟上屏幕刷新率(120Hz),没有大量的cpu使用.不过,这种猜测仍然是非常不科学的.在这一点上我得出的结论是,浏览器有自由加速他们选择的任何内容,因此答案是响亮的.
解决方法
Div with wrapper can be hw accelerated. (if browser support it)
所以我认为你的想法嵌套两个div将创建一个更容易的方式来实现你想要的.但是为了回答您的问题,scrollTop只能在支持硬件加速的浏览器中加速硬件加速.
> Firefox 4.0 beta 5支持硬件加速.
> IE 9 beta支持硬件加速.
> Chrome 6支持HW加速组合.
Safari和Opera尚未支持硬件加速.
这是根据2010年的这个页面
根据http://arstechnica.com/information-technology/2012/06/opera-12-arrives-with-webcam-apis-and-experimental-webgl-support/,Opera 12支持硬件加速.
根据TechCrunch的说法,Safari 5 for Windows支持硬件加速.
根据苹果Safari的网站,Safari 6支持硬件加速.
抱歉!我有链接到TechCrunch文章和Safari的网站,但我只能使用两个超链接.
编辑：
为了更好地回答这个问题,我补充说.使用CSS3滚动最有效的方法是overflow：scroll;或者overflow-x：scroll ;. overflow：CSS属性比scrollTop更有效,因为scrollTop是一个使用JavaScript的jQuery标记.所以使用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;
});
});
这个使用scrollTop的jQuery代码使所有< a href =“#top”> top< / a>动画滚动到顶部,而不是跳跃.当使用CSS滚动时,您不会得到这些动画滚动.此外,您可以使用此方法通过设置多个div标签的ID并编辑上述代码来满足您的需要来水平或垂直滚动到不同的位置.这是从http://www.electrictoolbox.com/jquery-scroll-top/.