使用 stellar.js 和 jquery 3.1.1 时未捕获的 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)

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

该片段只是为了向您展示错误。

$(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 中删除了加载事件。你可以改成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);
                });

这是一个 "working" fiddle: https://jsfiddle.net/y19x160g/1/ 并且通过工作我只是说它不再抛出错误了。

P.S: 不知道这个库到底是干什么用的。

在那个 js fiddle 中，我刚刚从当前 GitHub 项目复制了未缩小的脚本：https://github.com/markdalgleish/stellar.js/blob/master/src/jquery.stellar.js 并修改了加载事件。

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

Answer 2

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

jQuery v3.3.1

Stellar.js v0.6.2

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

使用 stellar.js 和 jquery 3.1.1 时未捕获的 TypeError

Uncaught TypeError using stellar.js with jquery 3.1.1

html

javascript

jquery

parallax

stellar.js