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 ノード ツリーのスクリーンショット
どのように物事を片付けるべきかについての助けはありますか?