使用带有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/ - 请参阅弃用