CODEWITHSUNDEEP
jquery
user3413610
user3413610

Reputation: 11

scroll not firing on consecutive div elements

I'm new here...

I have this html markup:

    <div class='scrollMe' id='1' style='height:100px;overflow:scroll;'>
       ... very long content; also gets appended dynamically
    </div>
    <div class='scrollMe' id='2' style='height:100px;overflow:scroll;'>
       ... very long content; also gets appended dynamically
    </div>

and, have the following script snippet:

$(document).ready(function () {
    $('.scrollMe').scroll(function () {
        // do something
    });
});

My problem is that, scroll is only fired on the first DIV container and never on any consecutive DIVs. I have tried everything I can think of including ".on" but nothing works. Anybody knows another way of doing this? Thanks.

Upvotes: 1

Views: 97

Answers (2)

user3413610
user3413610

Reputation: 11

After staring at my code, I figured out what was wrong (see more details below):

$(document).ready(function () {
$('.scrollMe').scroll(function () {
    // do something
    currentid = $('.scrollMe').attr('id');  

    // = "1" <--- no matter which container is scrolled, will always grab the 1st 
    alert(currentid);   

    // do more stuff
});
});

Since we have different DIVs scrolling, it should have been written this way:

$(document).ready(function () {
$('.scrollMe').scroll(function () {
    // do something
    // just an illustration 

    currentid = $(this).attr('id');

    alert(currentid);

    // do more stuff
});
});

Upvotes: 0

Jaykumar Patel
Jaykumar Patel

Reputation: 27614

Both are work perfect

Check this jsFiddle

Jquery

$(document).ready(function () {
  $('.scrollMe').scroll(function () {
    // do something
  });
});

Upvotes: 1

Related Questions