在 getScrollEventTarget 查找滚动父元素时，有一个细节就是会从自身开始查找，这也就是我们上面的 demo 中可以将指令宿主元素赋值给滚动元素自身的原因：
// 从自身开始，寻找设置了滚动的父元素。 overflow-y 为scroll或auto var getScrollEventTarget = function(element) { var currentNode = element; // bugfix, see and // nodeType 1表示元素节点 while (currentNode && currentNode.tagName !== 'HTML' && currentNode.tagName !== 'BODY' && currentNode.nodeType === 1) { var overflowY = getComputedStyle(currentNode).overflowY; if (overflowY === 'scroll' || overflowY === 'auto') { return currentNode; } currentNode = currentNode.parentNode; } return window; };
doCheck
这个函数用于判断是否已经滚动到底部，可以说是整个插件的核心逻辑。由于滚动的元素可以是自身，也可以是某个父元素，所以判断会分成两个分支。
var doCheck = function(force) { var scrollEventTarget = this.scrollEventTarget; // 滚动父元素 var element = this.el; var distance = this.distance; // 距离阈值 if (force !== true && this.disabled) return; var viewportScrollTop = getScrollTop(scrollEventTarget); // 被隐藏在内容区上方的像素数 // viewportBottom： 元素底部与文档坐标顶部的距离； visibleHeight：元素不带边框的高度 var viewportBottom = viewportScrollTop + getVisibleHeight(scrollEventTarget); var shouldTrigger = false; // 滚动元素就是自身 if (scrollEventTarget === element) { // scrollHeight - 在没有滚动条的情况下，元素内容的总高度，是元素的内容区加上内边距再加上任何溢出内容的尺寸。 // shouldTrigger为true表示已经滚动到元素的足够底部了。 // 参考https://hellogithub2014.github.io/2017/10/19/dom-element-size-summary/ shouldTrigger = scrollEventTarget.scrollHeight - viewportBottom <= distance; } else { // 当前元素与不是父元素，此时通常意味着当前元素的高度比滚动父元素要高，这样父元素才会出现滚动 // getElementTop(element) - getElementTop(scrollEventTarget) 当前元素顶部与滚动父元素顶部的距离 // offsetHeight元素带边框的高度 // elementBottom: 元素底部与文档坐标顶部的距离 var elementBottom = getElementTop(element) - getElementTop(scrollEventTarget) + element.offsetHeight + viewportScrollTop; shouldTrigger = viewportBottom + distance >= elementBottom; } if (shouldTrigger && this.expression) { this.expression(); // 触发绑定的无限滚动函数，通常是获取下一页数据。 之后scrollEventTarget.scrollHeight会变大 } };