web-dev-qa-db-ja.com

最新のBlink搭載ブラウザー（Chrome、Operaなど）での奇妙なスクロール動作

最近、Angularのツリービューコンポーネントライブラリの構築に取り組んでいます ngx-tree 。

問題

大規模なデータセットでのパフォーマンスのために、このライブラリに仮想スクロール機能を実装する方法を見つけ、Firefoxで適切に実行できるようにした後、 Blink -included browsers（Chromium、Chrome、Operaなど）の奇妙なスクロール動作に囚われています。

デモリンク

これがデモplunkrです- https://embed.plnkr.co/xMpmK5EBC46tDKpYFpw8 以下の更新＃1を参照

状況

  • Firefox、Edge、およびIE 11の場合、仮想スクロール機能を備えた私のライブラリは、スムーズなスクロールを期待して動作します。
  • ただし、ChromeおよびOperaでは、ツリービュー内のいくつかの位置にスクロールすると、スクロールバーの位置（スクロール領域のscrollTopプロパティ）がジャンプします）ダウンすると、フリッカーツリービューが発生し、仮想スクロール機能が停止します。

ブラウザ詳細版

  • Chrome-59.0.3071.115
  • Firefox-54.0
  • エッジ-40.15063.0.0

他のブラウザ

中国では、Chromiumプロジェクト（360se、QQブラウザー、Sogouブラウザー、UCブラウザーなど）から派生したshelledブラウザーがV8の古いバージョンとblink。そして、彼らはその奇妙なスクロール動作をしていません。

いくつかの仮定

これは、Chromiumチームによるスクロールの実装（スムーズスクロールなど）の最適化が原因ですか？

ガイドが欲しい！ （≧﹏≦）

更新＃1

イベントログを含むデモリンクの更新： https://embed.plnkr.co/GpQBZsguhZZOQWWbZnqI/

ログを確認するには、devtoolを開く前にスクロールをテストする必要があります

仮想スクロールのしくみとちらつきの原因について、もう少し説明する必要があります。

まず、 仮想スクロールの設計 を参照してください。

仮想スクロールの重要な点は、仮想スクロールを装備せずに、その領域と同じサイズの偽のスクロール領域を作成することです。したがって、最適な状況では、スクロール領域のスクロールバーの位置は、いくつかの予期されるイベントがその変更をトリガーするまで変更されるべきではありません。スクロールイベントでは、すべてのアニメーションフレームのビューを更新します。

高さ固定のスクロール領域内では、それらのレンダリングされていない要素をシミュレートすると、scrollTopプロパティは大きなパーセンテージ（-===-）で変化しないとの真実を仮定します。アニメーションフレーム内に適切に高さ（計算精度の偏差がある可能性があります）。

ただし、私の観察結果に基づいて、blink-seriesブラウザーは、スクロール可能な要素のscrollTopを更新するための別の戦略を実行しているようです。 scrollTopを更新するタイミングは、blinkシリーズのないブラウザーとは異なります。これまでにわかったことのすべて。

GIFのサンプル

ここでは、Chrome、Firefox、およびEdgeの出力を示すためにgifをいくつか作成しました。

Chrome

Chrome gif

Firefox

Firefox gif

縁

Edge gif

javascriptangulargoogle-chromescrolltreeview
58
e-cloud

virtual-scroll-demo-branchブランチからライブラリを取得しています：

'ngx-tree': 'https://rawgit.com/e-cloud/ngx-tree/virtual-scroll-demo-branch/src/lib',

そのブランチは、マスターの背後にある105のコミットです。内部要素の1つに誤ってmargin-topを設定します。これは 新しいバージョンで修正済み です。

編集：開発者は実際に コミットメッセージ でこのスタックオーバーフローの質問を参照しました。

2
Zenexer