12

我最初的猜测是答案是否定的，因为这里提供的证据：

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属性在理论上应该如何做到这一点有关，但目前似乎有更好的机会通过使用两个元素来获得我描述的行为，如下所示：

<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偏移量来实现滚动渲染，这似乎说明如果这不是硬件加速的话，性能就不行了在没有大量 CPU 使用的情况下，真正跟上屏幕刷新率 (120Hz)。尽管如此，这种推测仍然极不科学。在这一点上我要得出的结论是，浏览器可以自由地加速他们在合理范围内选择的任何东西，所以答案是一个响亮的可能。

4

3 回答 3

5

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

带有包装器的 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/， Opera 12支持硬件加速。

据 TechCrunch 报道，适用于 Windows 的 Safari 5支持硬件加速。

根据 Apple Safari 的网站，Safari 6支持硬件加速。

对不起！我有指向 TechCrunch 文章和 Safari 网站的链接，但我只能使用两个超链接。

编辑：

为了更好地回答这个问题，我补充了这个问题。使用 CSS3 进行滚动最有效的方法是overflow: scroll;或overflow-x: scroll;. overflow:CSS 属性比使用 JavaScript 的 jQuery 标记scrollTop更有效。scrollTop所以使用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/。

于 2012-08-23T04:37:00.567 回答
3

scrollTop不是硬件加速的。我发现即使在移动设备上也能产生平滑滚动的最佳方法是强制 css3 硬件加速与过渡相结合。

我假设你有 jQuery，所以为了清楚起见，我使用该语法，我所做的只是设置 css 属性和其他基本调用。

var $body = $('body');
function scrollTop(scrollPosition) {
    // account for the current scroll position
    var scrollDiff = $body.scrollTop() - scrollPosition;

    // use css transition
    $body.css('transition', '.5s');

    // translate3d forces hardware acceleration, second param is 'y'
    $body.css('transform', 'translate3d(0, ' + scrollDiff + 'px, 0)');

    // revert back to native scrollTop
    $body.bind('transitionend webkitTransitionEnd', function(event) {
        $body
        .scrollTop(scrollPosition)
        .css({'transition': '', 'transform': ''})
        .unbind(event);
    });
}

注意：我确实注意到该transitionend事件在移动设备上并不总是可靠的；这使得代码的“恢复到本机 scrollTop”部分出现故障。我认为最好的方法是更进一步，在不使用 scrollTop 的情况下实现自己的滚动条。第二个参数translate3d()除以容器的高度将是滚动条相对于轨迹栏的位置（百分比）。

于 2013-11-07T00:32:36.417 回答
0

document.getElementById("a").scrollTop效率更高，因为它存在的时间更长。浏览器已经有超过 10 年的时间来优化它。

于 2012-12-10T05:46:27.710 回答