Question

我试图在元素出现后触发事件，针对页面中不同位置的一些不同元素。我正在使用另一个StackExchange答案中的实用程序函数来处理确定元素A或元素B何时进入视图的过程，特别是使用jQuery（element）.offset（）。top确定何时在元素视图中。在此示例中，我们假设元素A在页面中较高，因此应该首先看到它，然后在页面中依次看到元素B。

当元素A出现时，元素A的代码将按预期触发，但是元素B也将触发，即使它在屏幕下方约1000且完全不可见。元素B触发后几秒钟，元素B的jQuery（element）.offset（）。top返回的值比元素B的实际位置小〜1400左右，然后在进一步滚动一点后进行校正

我尝试在控制台中跟踪变量，并同时使用jQuery（element）.offset（）。top;和jQuery（element）.position（）。top;但没有运气。

我正在使用的实用程序功能是这样的：

function Utils() {
  }
Utils.prototype = {
    constructor: Utils,
    isElementInView: function (element, fullyInView) {
        var pageTop = jQuery(window).scrollTop();
        var pageBottom = pageTop + jQuery(window).height();
        var elementTop = jQuery(element).offset().top;
        var elementBottom = elementTop + jQuery(element).height();

        if (fullyInView === true) {
            return ((pageTop < elementTop) && (pageBottom > elementBottom));
        } else {
            return ((elementBottom >= pageTop) && (elementTop <= pageBottom));
        }
    }
};
var Utils = new Utils();

我这样调用函数：

var xyz = Utils.isElementInView(ElementA, false);
              if(xyz) { then do stuff }
var zzz = Utils.isElementInView(ElementB, false);
              if(zzz) { then do stuff }

当我在控制台中跟踪Elements 1/2和PageBottom的elementTop时，我看到了这种情况：

(index):1237 elementTop : 4499 - Element 1 Top
(index):1235 PageBottom: 4496
(index):1237 elementTop : 5454 - Element 2 Top
(index):1235 PageBottom: 4499
(index):1237 elementTop : 4499 - Element 1 Top
(index):1302 Event Firing for Element 1
(index):1235 PageBottom: 4499
(index):1237 elementTop : 4148 - Element 2 Top
(index):1310 Event Firing for Element 2
(index):1235 PageBottom: 4500
(index):1237 elementTop : 4149 - Element 2 Top
(index):1310 Event Firing for Element 2
(index):1235 PageBottom: 4501
(index):1237 elementTop : 5454 - Element 2 Top

当元素1出现在视野中时（4499），当我四处走动时，元素2返回的顶部为5454。元素1进入视野时，元素2也立即触发，因为元素2返回的顶部变为4148。 for Element 2经过一点滚动后便会自行纠正，并返回5454。

为什么会这样？

jQuery（element）.offset（）。top滚动时暂时不准确

0 个答案: