Uncaught TypeError с использованием stellar.js с jquery 3.1.1

На одной странице я включаю только 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>

3 ответа

Решение

Сбой 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/ и работая, я просто говорю, что больше не выдает ошибку.

PS: я не знаю точно, для чего используется эта библиотека.

В этой js fiddle я просто скопировал не минимизированный скрипт из текущего проекта GitHub: https://github.com/markdalgleish/stellar.js/blob/master/src/jquery.stellar.js и изменил событие загрузки.

Другая ссылка: https://api.jquery.com/load-event/ - см. Не рекомендуется

Если вы не хотите менять код в реальном плагине, вы также можете просто добавить миграцию jQuery в проект, я столкнулся с той же проблемой при следующей настройке...

jQuery v3.3.1

Stellar.js v0.6.2

Добавление jquery-migrate/3.0.1 в проект решило проблему.

Вы установили jQuery UI 1.12.0-rc.2 также?

ура

Другие вопросы по тегам