私は数え切れないほどの投稿を読み、数え切れないほどコードを書き直しましたが、壁にぶつかりました。コンテナーに CSS scale3d 変換が適用されているため、ページをスクロールするときに要素の固定位置に CSS を使用しないという制限を克服しようとしています。私の最新のソリューションは機能しますが、主に最初のスクロールで「固着」や「吃音」が発生する傾向があります（スクロールの「勢い」によって見かけのパフォーマンスが向上するようです）。この現在のプロジェクトは、Ember で書かれた古いアプリを書き直したものであり、そのアプリの同じ機能は問題なく動作します。これを達成するために使用されたブードゥー教を発見しようとして目が出血するまで、非限定化された Ember コードを調べました (成功しませんでした)。
これは、これまでで最高のパフォーマンスを発揮した最新のイテレーションです。
const handler = () => {
const scroll = window.scrollY,
// provides scaling factor from container
scaled = scroll / scalingObject.current.scale;
requestAnimationFrame(() => {
$("div[data-sb-active-page='true'] .sb-fixed-scroll").each(function () {
const $el = $(this),
// a previous (non-translate3d) transform may have been cached
ot = $el.data('sb-original-transform');
$el.css({
transform: `translate3d(0px, ${scaled}px, 0px) ${ot}`,
});
});
});
};
$(window).on('scroll', handler);
いくつかのコメントを避けるために: 以前の変換を適用することを心配せずに、このコードを試しました:
$("div[data-sb-active-page='true'] .sb-fixed-scroll").css({
transform: `translate3d(0px, ${scaled}px, 0px)`
});
私は直接DOM構成を試しました-document.querySelectorAll要素を使用してから繰り返し、呼び出しますelement.style.transform = `translate3d(0px, ${scaled}px, 0px)`
これらのソリューションはすべて機能します - そして jQuery (驚くべきことに私には) が最高のように思えますが、完璧ではありません。前に述べたように、JS のみのソリューションが固着/吃音なしで動作するのを目撃したという事実がなければ、それは不可能であると述べているところです。
これは私の白いクジラです。
更新 - クイック アンド ダーティ JSFiddle を作成しました: https://jsfiddle.net/syzmic/sbwac5zq/3/
スクロールが最も問題となる現在のプロジェクトのページから HTML をスクレイピングしました。JSの現在の状態を含めました。それはほとんどの場合動作します..しかし、急速なマウスホイールは、スタッターまたはバウンスを引き起こす可能性があります.