滾動調用函數僅一次

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
    }
});