使用带有 jquery 3.1.1 的 stellar.js 未捕获的 TypeError答案

【问题标题】：Uncaught TypeError using stellar.js with jquery 3.1.1使用带有 jquery 3.1.1 的 stellar.js 未捕获的 TypeError
【发布时间】：2016-09-28 15:50:12
【问题描述】：

在单个页面中，我只包含 jQuery 3.1.1 和 stellar.js 以获得视差滚动效果，但是当我尝试将其用作 $(window).stellar(); 时，我在控制台中收到此错误：

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

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

sn-p 只是为了显示错误。

$(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>

【问题讨论】：

你能用小提琴之类的东西复制错误吗？
完成，我添加了一个 sn-p，但我认为它没有帮助。
是的，我的意思是它看起来像是与最新版本的 jQuery 的某种兼容性问题。它适用于任何 2.0 版本
我知道。但是怎么解决呢？我无法更改 jquery 版本。
为什么不能更改 jQuery 版本？一个想法是拥有一个包含 stellar.js 和兼容版本的 jquery 的单独页面，然后只需使用一个框架将其放入页面中。

标签： javascript jquery html parallax stellar.js

【解决方案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 中，加载事件被删除。你可以改成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 并修改了加载事件。

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

【讨论】：

【解决方案2】：

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

jQuery v3.3.1

Stellar.js v0.6.2

将 jquery-migrate/3.0.1 添加到项目中解决了这个问题。

【讨论】：