CODEWITHSUNDEEP
javascriptjquerycssscroll
Alfred
Alfred

Reputation: 21406

How to prevent duplicate events when scroll in jQuery?

I have 4 divs like;

<div class="diva">diva</div>
<div class="divb">divb</div>
<div class="divc">divc</div>
<div class="divd">divd</div>

They are 400px wide and high. I want to alert a when div b scrolls to top of page, and did using scroll function and scrollTop method. Each time when scroll, it check if scrollTop() if lager than 400, and alert a. But if I don't click the on the ok button of alert window, if I continue scrolling, multiple alerts will come, and I have to close them all.

But I just want one alert, and even if I continue scrolling, I want no more alerts. Also if the scrollTop is below 400px, I want to alert b (here also, I don't want repeats). If I got alert a, and if I scroll in opposite direction, and if scrollTop becomes below 400px, I want alert b, no problem for that.

Here is the fiddle.

Upvotes: 0

Views: 1854

Answers (3)

Abhitalks
Abhitalks

Reputation: 28437

The easiest way to avoid any confusion would be to keep state of scroll actions.

Demo: http://jsfiddle.net/abhitalks/uwUvC/1/

var last = 0, // last scroll-top to determine scroll direction
    scrolledUp = false, // to cache state of scroll up
    scrolledDown = false; // to cache state of scroll down
$(window).scroll(function (event) {
    var current = $(this).scrollTop();
    if (current > last) { // if scrolled down
        if (current > 400 && !scrolledDown) { // check position and state
            alert("A");
            scrolledDown = true; // reset scroll down state
        }
    } else { // if scrolled up
        if (current < 400 && scrolledDown && !scrolledUp) {
            alert("B");
            scrolledUp = true; // reset scroll up state
        }
    }
    last = current; // keep current position to check direction
});

This way you are sure about when you are scrolling up and when you are scrolling down. Keep state of scroll in respective variables and check them.

The alerts fire only once in each direction.

Upvotes: 0

Road Name
Road Name

Reputation: 129

please add this script on your file JS and try this script:

$(document).ready(function() {  
    $(window).scroll(function(){
      var xx = $(document).scrollTop();
      if(xx > jQuery(".divb").height()){
         alert("a");
      }else{
         alert("b");
      }           
    });
});

Upvotes: 1

webkit
webkit

Reputation: 3369

You are popping alerts on a 'scroll' event which happens every time you scroll.. if this is just a debugging annoyance, what you can do is use console.log('a') instead - example

If you wanted the actual function to run once for each time you reach it you can do this:

var a = false;
$(window).scroll(function(){
  var xx = $(document).scrollTop();    
  if(xx > 400){
      if (!a) {
         alert("a");
          a = true;
      }
  }else{
      if (a) {
         alert("b");
          a = false;
      }
  }           
});

fiddle for this example

Upvotes: 0

Related Questions