0

遵循 jQuery github 上的指南后，如果我想升级，我消除了 8/10 问题。但是我有 2 个问题，我无法自己解决或在谷歌的帮助下解决。请看一看：

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;
                }

我该如何解决这个问题？

4

2 回答 2

1

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

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

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

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

// 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....
于 2020-06-19T12:12:30.860 回答
0

Stellar.js不再维护这个 jQuery 插件。2018 年 4 月 1 日有一个pull request修复了这个问题并使其与 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},

或者更好的是，fork repo，应用 PR 并更新整个内容jquery.stellar.js以在您的站点/应用程序中使用。

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

于 2020-06-19T12:12:27.740 回答