滚动调用函数仅一次

Question

我有一个关于如果对象在我的屏幕内将被调用的函数的问题。 但是当对象在我的屏幕内时，该函数被调用并发出警报。 但是，如果我关闭警报并进一步向下滚动，则会再次调用该事件。 我不要那个。 我该如何解决？

工作示例

到目前为止我的代码：

<div id="wrapper">
    scroll down to see the div
</div>
<div id="tester"></div>

JS

$(window).on('scroll',function() {
    if (checkVisible($('#tester'))) {
        alert("Visible!!!")        
    } else {
        // do nothing 
    }
});

function checkVisible( elm, eval ) {
    eval = eval || "object visible";
    var viewportHeight = $(window).height(), // Viewport Height
        scrolltop = $(window).scrollTop(), // Scroll Top
        y = $(elm).offset().top,
        elementHeight = $(elm).height();   

    if (eval == "object visible") return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight)));
    if (eval == "above") return ((y < (viewportHeight + scrolltop)));
}

我想要的是 If 函数只会被调用 1 次，如果对象可见，则不会在每次滚动时调用。

Answer 1

尝试使用.one() ：

$(window).one('scroll',function() {
   // Stuff
});

或者，取消链接里面的事件：

$(window).on('scroll',function() {
   // After Stuff
   $(window).off('scroll');
});

猜你可能需要这个代码：

$(window).on('scroll',function() {
    if (checkVisible($('#tester'))) {
        alert("Visible!!!");
        $(window).off('scroll');
    } else {
        // do nothing
    }
});

小提琴： http : //jsfiddle.net/c68nz3q6/

Answer 2

让我们尝试在 javascript 中解决您的问题，因为这里的所有答案都在 jquery 中。 您可以使用全局变量，因为只要页面不刷新，浏览器就会保留其值。 所有在函数外声明的变量都称为全局变量，可以被任何函数访问。

 window.onscroll = myScroll; var counter = 0; // Global Variable function myScroll(){ var val = document.getElementById("value"); val.innerHTML = 'pageYOffset = ' + window.pageYOffset; if(counter == 0){ // if counter is 1, it will not execute if(window.pageYOffset > 300){ alert('You have scrolled to second div'); counter++; // increment the counter by 1, new value = 1 } } }

 #wrapper,#tester { width: 300px; height: 300px; border: 1px solid black; padding: 10px; } #wrapper p { text-align: center; } #tester { border: 1px solid crimson; } #value { position: fixed; left: auto; right: 40px; top: 10px; }

 <p id = "value"></p> <div id="wrapper"> <p>scroll down to div to see the alert</p> </div> <div id="tester"></div>

Answer 3

$(window).on('scroll', function() {
  if ($(document).scrollTop() >= $(document).height() / 100) {
    $("#spopup").show("slow");
    $(window).off('scroll');
  } else {
    $("#spopup").hide("slow");
  }
});

function closeSPopup() {
  $('#spopup').hide('slow');
}

为我工作

Answer 4

注意：这里的所有答案都使用$(window).off('scroll'); 这可能会影响您的其他脚本部分，就像在我的情况下，我的粘性导航停止工作。 所以我使用了一个简单的标志 var 来解决我的问题。

var scrolled = false;
$(window).on('scroll', function() {
  if (!scrolled) {
    if (checkVisible($('#tester'))) {
      alert("Visible!!!");
      $(window).off('scroll');
    } else {
      // do nothing
    }
    scrolled = true;
  }
});

Answer 5

当 $test 在您的屏幕中时，删除事件侦听器。

$(window).on('scroll',function() {
    if (checkVisible($('#tester'))) {
       alert("Visible!!!")   
       $(window).off('scroll');
    } else {
    // do nothing
    }
});