跟踪元素可视？试试Intersection Observer

const observer = new IntersectionObserver(callback[, options]);
// 方法
// 开始观察某个目标元素  
observer.observe(target)  
// 停止观察某个目标元素
observer.unobserve(target)  
// 关闭监视器  
observer.disconnect()  
// 获取所有 IntersectionObserver 观察的 targets  
observer.takeRecords()  
// 注：该方法是同步获取所有targets，一旦调用，callback回调将不再执行

IntersectionObserver.prototype.observe = function(target) {
 var isTargetAlreadyObserved = this._observationTargets.some(function(item) {
   return item.element == target;
 });
 if (isTargetAlreadyObserved) {
   return;
 }
 if (!(target && target.nodeType == 1)) {
   throw new Error('target must be an Element');
 }
 this._registerInstance();
 this._observationTargets.push({element: target, entry: null});
 this._monitorIntersections();
 this._checkForIntersections();
}

IntersectionObserver.prototype._registerInstance = function() {
 if (registry.indexOf(this) < 0) {
   registry.push(this);
 }
};

IntersectionObserver.prototype._monitorIntersections = function() {
 if (this.POLL_INTERVAL) {
   this._monitoringInterval = setInterval(
       this._checkForIntersections, this.POLL_INTERVAL);
 }
 else {
   addEvent(window, 'resize', this._checkForIntersections, true);
   addEvent(document, 'scroll', this._checkForIntersections, true);
   if (this.USE_MUTATION_OBSERVER && 'MutationObserver' in window) {
     this._domObserver = new MutationObserver(this._checkForIntersections);
     this._domObserver.observe(document, {
       attributes: true,
       childList: true,
       characterData: true,
       subtree: true
     });
   }
 }
}

IntersectionObserver.prototype._checkForIntersections = function() {
 if (!this.root && crossOriginUpdater && !crossOriginRect) {
   // Cross origin monitoring, but no initial data available yet.
   return;
 }
 // 判断root是否在dom结构中，传入的root一定要是target的祖先元素
 var rootIsInDom = this._rootIsInDom();
 var rootRect = rootIsInDom ? this._getRootRect() : getEmptyRect();
 this._observationTargets.forEach(function(item) {
   var target = item.element;
   var targetRect = getBoundingClientRect(target);
   var rootContainsTarget = this._rootContainsTarget(target);
   var oldEntry = item.entry;
   var intersectionRect = rootIsInDom && rootContainsTarget &&
       this._computeTargetAndRootIntersection(target, targetRect, rootRect);
   var rootBounds = null;
   if (!this._rootContainsTarget(target)) {
     rootBounds = getEmptyRect();
   } else if (!crossOriginUpdater || this.root) {
     rootBounds = rootRect;
   }
   var newEntry = item.entry = new IntersectionObserverEntry({
     time: now(),
     target: target,
     boundingClientRect: targetRect,
     rootBounds: rootBounds,
     intersectionRect: intersectionRect
   });
   if (!oldEntry) {
     this._queuedEntries.push(newEntry);
   } else if (rootIsInDom && rootContainsTarget) {
     // If the new entry intersection ratio has crossed any of the
     // thresholds, add a new entry.
     if (this._hasCrossedThreshold(oldEntry, newEntry)) {
       this._queuedEntries.push(newEntry);
     }
   } else {
     // If the root is not in the DOM or target is not contained within
     // root but the previous entry for this target had an intersection,
     // add a new record indicating removal.
     if (oldEntry && oldEntry.isIntersecting) {
       this._queuedEntries.push(newEntry);
     }
   }
 }, this);
 if (this._queuedEntries.length) {
   this._callback(this.takeRecords(), this);
 }
};

IntersectionObserver.prototype._computeTargetAndRootIntersection =
function(target, rootRect) {
 // If the element isn't displayed, an intersection can't happen.
 if (window.getComputedStyle(target).display == 'none') return;
 var targetRect = getBoundingClientRect(target);
 var intersectionRect = targetRect;
 var parent = getParentNode(target);
 // 标志位
 var atRoot = false;
 while (!atRoot) {
   var parentRect = null;
   var parentComputedStyle = parent.nodeType == 1 ?
   window.getComputedStyle(parent) : {};
   // 如果parentRect display为none，target和root元素同样是不可能存在交集的
   if (parentComputedStyle.display == 'none') return;
   if (parent == this.root || parent == document) {
     atRoot = true;
     parentRect = rootRect;
   } else {
     // If the element has a non-visible overflow, and it's not the <body>
     // or <html> element, update the intersection rect.
     // Note: <body> and <html> cannot be clipped to a rect that's not also
     // the document rect, so no need to compute a new intersection.
     if (parent != document.body &&
     parent != document.documentElement &&
     parentComputedStyle.overflow != 'visible') {
       parentRect = getBoundingClientRect(parent);
     }
   }
   // If either of the above conditionals set a new parentRect
   // calculate new intersection data.
   if (parentRect) {
     intersectionRect = computeRectIntersection(parentRect, intersectionRect);
     if (!intersectionRect) break;
   }
     parent = getParentNode(parent);
 }
   return intersectionRect;
}
 function getParentNode(node) {
   var parent = node.parentNode;
   if (parent && parent.nodeType == 11 && parent.host) {
     // If the parent is a shadow root, return the host element.
     return parent.host;
   }
   if (parent && parent.assignedSlot) {
     // If the parent is distributed in a <slot>, return the parent of a slot.
     return parent.assignedSlot.parentNode;
   }  
   return parent;
  }

function computeRectIntersection(rect1, rect2) {
   var top = Math.max(rect1.top, rect2.top);
   var bottom = Math.min(rect1.bottom, rect2.bottom);
   var left = Math.max(rect1.left, rect2.left);
   var right = Math.min(rect1.right, rect2.right);
   var width = right - left;
   var height = bottom - top;
   return (width >= 0 && height >= 0) && {
     top: top,
     bottom: bottom,
     left: left,
     right: right,
     width: width,
     height: height
   };
 }

function IntersectionObserverEntry(entry) {
 this.time = entry.time;
 this.target = entry.target;
 this.rootBounds = entry.rootBounds;
 this.boundingClientRect = entry.boundingClientRect;
 this.intersectionRect = entry.intersectionRect || getEmptyRect();
 this.isIntersecting = !!entry.intersectionRect;
 // Calculates the intersection ratio.
 var targetRect = this.boundingClientRect;
 var targetArea = targetRect.width * targetRect.height;
 var intersectionRect = this.intersectionRect;
 var intersectionArea = intersectionRect.width * intersectionRect.height;
// Sets intersection ratio.
if (targetArea) {
 // Round the intersection ratio to avoid floating point math issues:
 // https://github.com/w3c/IntersectionObserver/issues/324
 this.intersectionRatio = Number((intersectionArea / targetArea).toFixed(4));
 } else {
 // If area is zero and is intersecting, sets to 1, otherwise to 0
 this.intersectionRatio = this.isIntersecting ? 1 : 0;
 }
}

if (this._queuedEntries.length) {
 this._callback(this.takeRecords(), this);
}

IntersectionObserver.prototype.takeRecords = function() {
 var records = this._queuedEntries.slice();
 this._queuedEntries = [];
 return records;
}