使用jquery 3.1.1实现未捕获的TypeError

Question

在一个页面中，我只包括jQuery 3.1.1和恒星.js的视差滚动效果，但当我尝试使用它作为$(window).stellar();我得到这个错误在控制台:

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

我尝试使用迁移插件的建议在许多答案，但没有解决我的问题。

代码片段只是为了显示错误。

$(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/和工作，我只是说它不再抛出错误了。

p。S:我不知道这个图书馆到底是干什么用的。

在js小提琴我只是复制了未缩小的脚本从当前GitHub项目:https://github.com/markdalgleish/stellar.js/blob/master/src/jquery.stellar.js修改了load事件

其他参考:https://api.jquery.com/load-event/-参见已弃用

Answer 2

如果你不想更改实际插件中的代码，你也可以直接将jQuery添加到项目中迁移，我在下面的设置中遇到了同样的问题…

jQuery v3.3.1

Stellar.js v0.6.2

添加jquery-migrate/3.0.1到项目中修复了这个问题。