問題タブ [scrolltrigger]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - ページ上のスライド セクションのみのスクロールジャッキングまたは固定
いくつかのスライドがあるセクションに到達するまで通常どおりスクロールするページが必要です。ここでのスクロール動作は、スライドが終了するまで fullpage.js のようなものに変更され、その後、通常のスクロール動作が復元されます。
ページの HTML 構造https://codepen.io/skb089/full/poPbdqe
3 つのアイテム: .a-item、.b-itemおよび.c-itemfullpage.js のような機能が必要なスライドであり.normal-scroll、ページを通常どおりスクロールする部分です。
これまでのところ、私は試しました：
マウス コントロールが有効になっている Swiper Js ですが、エッジでのリリース機能は非常にバグが多く、適切に動作しません。ここで強調表示されている問題ですが、提供された解決策がうまくいきません。
オブジェクトがビューポートに完全に入っていることを確認し、jqueryマウスホイールを使用してスクロールを無効にしてから、スクロール方向やその他の条件に基づいてループで各スライドを表示する交差点オブザーバーですが、スクロールが速すぎると交差点オブザーバーが右側で起動しません時間のどちらかであり、恐ろしく一貫性のない経験につながります。
これを回避しようとしましたが、何も変わりませんでした
次に、Gsap の ScrollTrigger を使用してセクションをピン留めできますが、タイムラインが意図したとおりに機能しません。アニメーション化するには常にスクロールする必要があり、スクロールが速すぎるとセクションがスキップされます。方向によるラベルへのスナップもスムーズではなく、しばしば遅れます。
これに対するいくつかの解決策は高く評価されます。
javascript - Gsap ScrollTrigger アニメーション水平
アイテムが移動しているときにアイテムが .5 にスケーリングされている間に水平スクロールを作成しようとしていますが、Foreach で scrollTrigger を作成することはできません。 /eYWMrEW