How to prevent duplicate events when scroll in jQuery?

Question

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.

Road Name · Accepted Answer · 2014-06-10 11:03:54Z

1

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

edited Jun 10, 2014 at 11:03

answered Jun 10, 2014 at 10:37

Road Name

12914 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Stephen Ostermiller Over a year ago

While this code may solve the problem, a code only answer is not high quality. It would be better to describe what this code does, show where it gets inserted, and provide links to relevant documentation.

Road Name Over a year ago

thank you for your advice, I will try to use a phrase that is easy to understand.

webkit · Accepted Answer · 2014-06-10 10:46:33Z

0

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

answered Jun 10, 2014 at 10:46

webkit

3,3691 gold badge19 silver badges19 bronze badges

Comments

Abhitalks · Accepted Answer · 2014-06-10 11:12:17Z

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.

Collectives™ on Stack Overflow

How to prevent duplicate events when scroll in jQuery?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related