仅滚动一次调用函数

时间:2015-08-21 07:15:48

标签: javascript jquery

我得到一个关于如果对象在我的屏幕内将被调用的函数的问题。但是当对象在我的屏幕内时,该函数被调用并且已触发警报。但是,如果我关闭警报并向下滚动,则会再次调用该事件。我不要那个。我该如何解决?

Working example

到目前为止我的代码:

<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函数只会被调用一次而不是每次滚动都会被调用。

5 个答案:

答案 0 :(得分:21)

尝试使用.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/

答案 1 :(得分:7)

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

&#13;
&#13;
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
     }
   }
  }
&#13;
#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;
  }
&#13;
<p id = "value"></p>
<div id="wrapper">
    <p>scroll down to div to see the alert</p>
</div>
<div id="tester"></div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

$(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');
}

为我工作

答案 3 :(得分:0)

注意:这里的所有答案都使用 $(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;
  }
});

答案 4 :(得分:-4)

当$ test在你的屏幕内时,删除事件监听器。

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