0

angular js アプリでScrollmagicを使用しています。私のアプリには、無限にスクロールできる右側のサイドバーがあります。以下のように、特定の時間固着してから剥がれるセクションがあります

  • セクション A が表示され、スティックします。
  • セクション A は数ピクセルの間粘着性を維持し、その後剥がれます
  • セクション B が表示され、数ピクセル後にくっつく
  • セクション B は、数ピクセルの間スティッキーのままで、その後はがれます。

実際には、複数のシーンを作成し、それを scrollMagicController に追加します。scrollmagic が DOM ノードを保持しているため、メモリ リークが発生しているのではないかと疑っています。devtools のヒープ プロファイラがこれを証明しています。シーンとコントローラーには、問題を解決するために呼び出す必要がある destroy メソッドがあることは知っていますが、複数のノードを破棄する方法がわかりません。以下は私が試したことです

var scrollMagicCtrl = new ScrollMagic.Controller();

//create scene dynamically whenever stickyContainerInView event fires
scope.$on('stickyContainerInView', function(event, inViewElement) {    
    new ScrollMagic.Scene({
            triggerElement: someElement, //Selector or DOM object that defines the start of the scene
            triggerHook: 'onLeave', //sets the position of trigger hook w.r.t viewport
            duration: someDuration, //The duration(in pixels) for which the element will remain sticky
            offset: -60 //Offset Value for the Trigger hook position
        })
        .setPin(someContainer)
        .addTo(scrollMagicCtrl);
});

//clean up things on angular's destroy method
$scope.$on("$destroy", function() {    
    scrollMagicCtrl.destroy();
    scrollMagicCtrl = null;
});

コントローラーの destroy メソッドを呼び出すだけで、追加されたすべてのシーンが自動的に破棄されるはずですが、残念ながらそのようには機能しません。

ヒープ プロファイラーの切り離された DOM ノード ツリーのスクリーンショット

どのように物事を片付けるべきかについての助けはありますか?

4

0 に答える 0