使用帶有jquery 3.1.1的stellar.js的未捕獲的TypeError

Question

在單個頁面中，我只包含jQuery 3.1.1和stellar.js用於視差滾動效果，但是當我嘗試使用它作為$(window).stellar(); 我在控制台中收到此錯誤：

Uncaught TypeError: f.getClientRects is not a function (jquery-3.1.1.min.js:4)

我嘗試使用migrate插件，如許多答案中所建議的那樣，但並沒有解決我的問題。

該片段只是為了向您顯示錯誤。

 $(function(){ $('.main').stellar(); }); 

 <div class="main"> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> </div> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/stellar.js/0.6.2/jquery.stellar.min.js"></script> 

Answer 1

由於這段代碼，stellar.js失敗了：

$(window).load(function() {
                var oldLeft = self._getScrollLeft(),
                    oldTop = self._getScrollTop();

                self._setScrollLeft(oldLeft + 1);
                self._setScrollTop(oldTop + 1);

                self._setScrollLeft(oldLeft);
                self._setScrollTop(oldTop);
            });

在jquery 3.0中，load事件被刪除。 你可以改為on('load', function{});

 $(window).on('load', function() {
                    var oldLeft = self._getScrollLeft(),
                        oldTop = self._getScrollTop();

                    self._setScrollLeft(oldLeft + 1);
                    self._setScrollTop(oldTop + 1);

                    self._setScrollLeft(oldLeft);
                    self._setScrollTop(oldTop);
                });

這是一個“工作”的小提琴： https ： //jsfiddle.net/y19x160g/1/並通過工作我只是說，不再拋出錯誤。

PS：我不確切知道這個庫的用途。

在那個js小提琴我只是從當前的GitHub項目中復制了未縮小的腳本： https ： //github.com/markdalgleish/stellar.js/blob/master/src/jquery.stellar.js並修改了load事件。

其他參考： https ： //api.jquery.com/load-event/ - 請參閱棄用

Answer 2

如果你不想改變實際插件中的代碼，你也可以只將jQuery migrate添加到項目中，我在下面的設置中遇到了同樣的問題...

jQuery v3.3.1

Stellar.js v0.6.2

將jquery-migrate / 3.0.1添加到項目修復了該問題。