問題タブ [custom-scrolling]

私は数え切れないほどの投稿を読み、数え切れないほどコードを書き直しましたが、壁にぶつかりました。コンテナーに CSS scale3d 変換が適用されているため、ページをスクロールするときに要素の固定位置に CSS を使用しないという制限を克服しようとしています。私の最新のソリューションは機能しますが、主に最初のスクロールで「固着」や「吃音」が発生する傾向があります（スクロールの「勢い」によって見かけのパフォーマンスが向上するようです）。この現在のプロジェクトは、Ember で書かれた古いアプリを書き直したものであり、そのアプリの同じ機能は問題なく動作します。これを達成するために使用されたブードゥー教を発見しようとして目が出血するまで、非限定化された Ember コードを調べました (成功しませんでした)。

これは、これまでで最高のパフォーマンスを発揮した最新のイテレーションです。

いくつかのコメントを避けるために: 以前の変換を適用することを心配せずに、このコードを試しました:

私は直接DOM構成を試しました-document.querySelectorAll要素を使用してから繰り返し、呼び出しますelement.style.transform = `translate3d(0px, ${scaled}px, 0px)`

これらのソリューションはすべて機能します - そして jQuery (驚くべきことに私には) が最高のように思えますが、完璧ではありません。前に述べたように、JS のみのソリューションが固着/吃音なしで動作するのを目撃したという事実がなければ、それは不可能であると述べているところです。

これは私の白いクジラです。

更新 - クイック アンド ダーティ JSFiddle を作成しました: https://jsfiddle.net/syzmic/sbwac5zq/3/

スクロールが最も問題となる現在のプロジェクトのページから HTML をスクレイピングしました。JSの現在の状態を含めました。それはほとんどの場合動作します..しかし、急速なマウスホイールは、スタッターまたはバウンスを引き起こす可能性があります.

2 日前に flutter で sliver ウィジェットの使用法を学び、それを使ってスキルを伸ばしていました。私はある種の架空のプロジェクトを構築していましたが、そこで問題に直面しました。

考えてみましょう、xウィジェットの下の私の体のコンテナに15個のコンテナがあり、それらが垂直にスクロールできるようにします。 appbar または sliver appbar のように、他のものはその下にスクロールします。

ここでは、CustomScrollView ウィジェットの下でスライバーと SliverFixedExtentList を使用して目的を示しています。スライバーを使用しない他のオプションがある場合は、お気軽に私と共有してください。前もって感謝します ：）

免責事項: 私は JavaScript 開発者ではなく、Web デザイナーです。HTML と CSS は一日中扱いますが、JS はそれほど多くありません。だからこそ、私は助けを求めています。

次のスクリプトを使用すると、ページの上部までスムーズにスクロールできます。

スクリプトの実行中にユーザーがスクロールダウンしてページの上部に戻ることを決定した場合、スクリプトの実行を「停止」する方法はありますか?

参照用のデモは次のとおりです: https://codepen.io/ricardozea/pen/ewBzyO

ありがとうございました。