12

私の最初の推測では、ここに示されている証拠があるため、答えはノーです。

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

私のコンピュータでは、「HW アクセラレーション」バージョンの方がスクロールがスムーズであることが定性的にわかります。120Hzのモニターを使用しています。これは、2 番目の方法の方が高速で効率的であることを示しています。

次のような 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プロパティが理論的にこれを行う方法に関連していますが、現時点では、次のように 2 つの要素を使用して、説明した動作を取得する可能性がはるかに高いようです。

<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 はハードウェア アクセラレーションできます。（ブラウザがサポートしている場合）

したがって、2 つの div をネストするというアイデアは、目的を達成するためのより簡単な方法になると思います。しかし、あなたの質問に答えるにscrollTopは、ハードウェア アクセラレーションをサポートするブラウザーでのみハードウェア アクセラレーションが使用されます。

  1. Firefox 4.0 ベータ 5は HW アクセラレーションをサポートしています。
  2. IE 9 ベータ版は HW アクセラレーションをサポートしています。
  3. Chrome 6+はHW アクセラレーション コンポジションをサポートしています。

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 によると、Safari 5 for Windowsはハードウェア アクセラレーションをサポートしています。

Apple Safari の Web サイトによると、Safari 6はハードウェア アクセラレーションをサポートしています。

ごめん！TechCrunch の記事と Safari の Web サイトへのリンクはありましたが、使用できるハイパーリンクは 2 つだけです。

編集：

質問によりよく答えるために、質問に追加します。CSS3 でスクロールを行う最も効率的な方法はoverflow: scroll;、 またはoverflow-x: scroll;です。CSS プロパティは、JavaScript を使用する jQuery タグoverflow:よりも効果的な CSS ですscrollTop。scrollTopつまり、使用scrollTopは CSS ではなく、JavaScript です。また、CSS を使用すると、jQuery ライブラリをインポートしたり、JavaScript を有効にしたりする必要がないため、水平スクロールを実現する最も簡単な方法でもあります。

divjQuery/JavaScript を使用する代わりに2 つのタグと CSS を使用すると、説明した動作が得られる可能性がはるかに高くなるという点で、私は完全に同意します。

を除き、別の場所に自動的にスクロールできるようにしたい場合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 に答える
0

document.getElementById("a").scrollTop長く使用されているため、より効率的です。ブラウザは 10 年以上かけて最適化してきました。

于 2012-12-10T05:46:27.710 に答える