Javascript 检查元素是否在视口中

我有这段代码，可以很好地理解元素是否在视口中。我希望在控制台位于视口中时写入一次，在控制台不在视口中时写入一次（并且不像现在那样连续写入）

$.fn.isInViewport=function（）{
var elementTop=$（this）.offset（）.top；
var elementBottom=elementTop+$（this.outerHeight（）；
var viewportTop=$（window.scrollTop（）；
var viewportBottom=viewportTop+$（window）.height（）；
返回elementBottom>viewportTop&&elementTop

编辑： 谢谢，我试过你的代码，效果很好，但我无法将它与我的上下文中的多个元素相匹配

var sur = document.getElementsByClassName("survey");


    let wasInViewPort;
    $(window).on('resize scroll', function() {
      for (var i = 0; i < sur.length; i++) {
        const isInViewPort = $(sur[i]).isInViewport();
        if (isInViewPort !== wasInViewPort) {
          var a = isInViewPort ? ' in viewport' : ' not in viewport';
            console.log(sur[i].id+a);
        }
        wasInViewPort = isInViewPort;
      }
    
    
    });

var sur=document.getElementsByClassName（“调查”）；
让我们一起去运动吧；
$（窗口）。在（'resize scroll'，function（）上{
对于（变量i=0；i

只需使用一个变量来跟踪上一个结果，并且仅在更改时调用

控制台.log

：

let wasInViewPort;
$(window).on('resize scroll', function() {
    const isInViewPort = $('#Something').isInViewport();
    if (isInViewPort !== wasInViewPort) {
        console.log(`{isInViewPort ? '' : 'not '}in viewport`);
    }
    wasInViewPort = isInViewPort;
});

---

只需使用一个变量来跟踪上一个结果，并且仅在更改时调用

console.log

：

let wasInViewPort;
$(window).on('resize scroll', function() {
    const isInViewPort = $('#Something').isInViewport();
    if (isInViewPort !== wasInViewPort) {
        console.log(`{isInViewPort ? '' : 'not '}in viewport`);
    }
    wasInViewPort = isInViewPort;
});

---

您需要跟踪滚轮和鼠标单击拖动运动。您可以尝试检查元素的垂直偏移是否大于滚动顶部，但小于滚动顶部和窗口内部高度之间的差值。请将值缓存在某个位置：如果布尔值被翻转，请登录到控制台。我的代码已经运行良好，我只希望它在元素可见时激活，然后在元素不再可见时激活。您应该查看缓存

$（“#某物”）

在滚动手柄外部，您需要跟踪滚轮和鼠标单击拖动运动。您可以尝试检查元素的垂直偏移是否大于滚动顶部，但小于滚动顶部和窗口内部高度之间的差值。将值缓存在某个位置：如果布尔值被翻转，则记录到控制台。My代码已经很好地工作了，我只希望它在元素可见时激活，然后在元素不再可见时激活。您应该查看滚动手柄外部的缓存

$（“#某物”）

，谢谢，我尝试了你的代码，效果很好，但我无法将其与多个元素的上下文相匹配。你的意思是说你有除

#Something

之外的其他元素，你想独立跟踪它们在视口中/视口外的状态吗？这当然是可能的，但与你问的问题截然不同。如果你想问的话，一定要问一个新问题。谢谢，我尝试了你的代码，效果很好，但我无法将它与我的上下文中的多个元素相匹配。你是说你有除

#某物

以外的其他元素，你想独立跟踪它们在视口中/视口外的状态吗？这当然是可能的，但与你问的问题截然不同。如果你想问的话，一定要把它作为一个新问题来问。