从 jQuery 1.12.4 迁移到 3.3.0 的问题

Question

按照 jQuery github 的指南进行操作后，如果我想升级，我消除了 8/10 的问题。但是，我遇到了 2 个问题，我自己无法解决，也无法在 google 的帮助下解决。请看：

JQMIGRATE：jQuery.fn.offset() 需要有效的 DOM 元素

            var viewportOffsets = this.$viewportElement.offset(),
                hasOffsets = viewportOffsets !== null && viewportOffsets !== undefined;

            this.viewportWidth = this.$viewportElement.width();
            this.viewportHeight = this.$viewportElement.height();

            this.viewportOffsetTop = (hasOffsets ? viewportOffsets.top : 0);
            this.viewportOffsetLeft = (hasOffsets ? viewportOffsets.left : 0);
        },

以及以下内容， JQMIGRATE：jQuery.fn.offset() 需要一个连接到文档的元素

$backgroundElements.each(function() {
                var $this = $(this),
                    backgroundPosition = getBackgroundPosition($this),
                    horizontalOffset,
                    verticalOffset,
                    positionLeft,
                    positionTop,
                    marginLeft,
                    marginTop,
                    offsetLeft,
                    offsetTop,
                    $offsetParent,
                    parentOffsetLeft = 0,
                    parentOffsetTop = 0,
                    tempParentOffsetLeft = 0,
                    tempParentOffsetTop = 0;

                // Ensure this element isn't already part of another scrolling element
                if (!$this.data('stellar-backgroundIsActive')) {
                    $this.data('stellar-backgroundIsActive', this);
                } else if ($this.data('stellar-backgroundIsActive') !== this) {
                    return;
                }

我该如何解决这个问题？

Answer 1

这个 jQuery 插件，Stellar.js, is no longer maintained. There is a pull request 从 2018 年 4 月 1 日起修复了这个问题并使其兼容 jQuery 3.2.1，但它从未被合并。

您可以在此处查看更改 jquery.stellar.js 并手动更改：

改变这个：

var viewportOffsets = this.$viewportElement.offset(),

进入这个：

var viewportOffsets = this.$viewportElement[0] !== window ? this.$viewportElement.offset() : {top: 0, left: 0},

或者更好的是，分叉 repo，应用 PR 并更新整个 jquery.stellar.js 以在您的 site/app.

中使用

您还可以使用提交支持 jQuery 3.2.1 的贡献者分支：https://github.com/sancas/stellar.js

Answer 2

来源： https://github.com/jquery/jquery-migrate/blob/master/warnings.md#jqmigrate-jqueryfnoffset-requires-a-valid-dom-element

JQMIGRATE：jQuery.fn.offset() 需要一个有效的 DOM 元素原因：在 jQuery 的早期版本中，对于某些无效输入的情况，.offset() 方法会 return 值为 { top: 0, left: 0 }。 jQuery 3.0 在某些情况下会抛出错误。 jQuery 集合中的所选元素必须是具有 getBoundingClientRect 方法的 DOM 元素。文本节点、window 对象和普通 JavaScript 对象不是 .offset() 方法的有效输入。 jQuery 在这些情况下可能会引发错误，但通常不保证输入无效会产生特定结果。

解决：不要尝试获取或设置无效输入的偏移量信息。

我的理解是 $viewportElement 是 null/undefined 而它应该有一个值....所以你需要追踪为什么会这样......或者在它无效时处理。

// As of jQuery 3.0, .offset() only works for elements that are currently
// in the document. In earlier versions, this would return the value below
// but in jQuery 3.0 this throws an error.

//so we are defualting it to a value and use this instead.
var parentOffset = {top: 0, left: 0};

// If the element is in the document we are safe to use .offset()
if(document.body.contains($viewportElement[0])) {
    parentOffset = $viewportElement.offset();
}

//###########

var viewportOffsets = parentOffset;

//this will now neever be null or undefined as we set it above.
//this is not where it was failing... it was failing before this 
hasOffsets = viewportOffsets !== null && viewportOffsets !== undefined;


//but the above code would try an ensure that .offset();
// when .offset(); is called on something that does not exist it defaults to what > 3.0 would of done....

从 jQuery 1.12.4 迁移到 3.3.0 的问题

Migrating from jQuery 1.12.4 to 3.3.0 issues

html

jquery

migrating

libraries