Question

我正在尝试编写一个JS函数，该函数可以检测某个元素是否即将进入视口。

我正在研究智能手机的解决方案，因此不需要处理水平滑动，我需要的是一种解决方案，该解决方案可以在元素进入视口之前检测是否要滚动到某个元素至少300px ，上下滚动即可。

我已经具有确定某个元素当前是否在视口中的功能-参见下文。

var isInViewport = function(el) {
   var bounding = el.getBoundingClientRect();
   return (
       bounding.top >= 0 &&
       bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight)
   );
};

var isAboutToEnterViewport = function(el, distanceBeforeDetection) {
   // ??? code ???
}

Answer 1

作为第二个参数，您可以选择像这样传递阈值距离

var isInViewport = function(el, dist) {
   var bounding = el.getBoundingClientRect();
   return (
       bounding.top >= 0 - (dist || 0) &&
       bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) 
                        + (dist || 0)
   );
};

var isAboutToEnterViewport = isInViewport(el, distanceBeforeDetection);

Answer 2

var isAboutToEnterViewport = function(el, distanceBeforeDetection)
    var bounding = el.getBoundingClientRect();

    return (
        bounding.top >= -1 * (distanceBeforeDetection) &&
        bounding.bottom <= ((window.innerHeight || document.documentElement.clientHeight) + distanceBeforeDetection)
    );
};

用法：

var foo = isAboutToEnterViewport(el, 300);

如果el在视口中，或者距离视点小于300px，则返回的值为true。

如何使用JavaScript检测元素有关进入视口的信息？

2 个答案: