$('#div').bind('scroll' function({})) not working

Question

I have added 2 codes here the window.scroll works on my example but not the second one binding the div to the scroll.

Any one knows what am I doing wrong!?

Just so you know I'm working in MeteorJS <- I dont think that this is the problem bc. the window scrolling works.

This 2 codes are in the same js file.

    $(window).scroll(function() {
        lastSession = Session.get('c_info')[Session.get('c_info').current]
        if(lastSession.list == 0 && $(window).height() + $(window).scrollTop() >= $(document).height()){
            lastItem = $( ".list-item div:last" ).html();
            if (lastSession.page == 1){
                currentSession().more();
                lastItem2 = $( ".list-item div:last" ).html();
            } else if( lastItem2 != lastItem) {
                currentSession().more();
                lastItem2 = $( ".list-item div:last" ).html()
            }
        }
    });

    $('#playlist').bind('scroll',function() {
        console.log("div is scrolling");
    });

I tried this too:

 $('#playlist').scroll(function() {
    console.log("div is scrolling");
 });

MeteorJS Template:

<template name="playList">
    <div id="playlist" class="playlist show-for-large-up">
        {{#each list}}
        <a href="/video/{{_id}}" class="large-12 columns" id="pl{{v_id}}">
            <div>
                <div class="large-7 columns plRight">
                    <span>{{vTitle}}</span>
                </div>
            </div>
        </a>
        {{/each}}
    </div>
</template>

Also Tried:

$('#playlist').on('scroll',function() {console.log('test')});// not working

Tried to Change the id name and putting on the document ready:

$( document ).ready(function (){
        $('#pl_list').bind('scroll',function() {
                console.log("div is scrolling");
            });
    })//failed

The div has a scrollbar and the list is long and i have a css like this:

.playlist {
  padding: 0;
  overflow-y: scroll;
  height: 458px;
}

Also tried:

Template.playList.rendered = function () {
    console.log("playlist rendered");// i can see this on logs this tells that template is in doom
    Meteor.setTimeout(function(){
       $('#playlist').on('scroll',function(){
       console.log('Scrolling...');
    });
    }, 2000);// with settimeout i have giveng it 2 more seconds
}

Answer 1

Try this out -

$(document).ready(function(){
  $('#playlist').on('scroll',function(){
    console.log('Scrolling...');
  });
});

Answer 2

Use

 $('#playlist').scroll(function() {
    console.log("div is scrolling");
 });

instead (like you did for window).

Thats the purpose of scroll(). See jquery documentation.

Answer 3

Scrolling event is fired on the element, if it has scrolled. So if you only scrolling the "body" element of the DOM it will not be triggered for #playlist. So you have put a scrollbar to the container element of #playlist. Shot answer, cut the height and add a scrollbar, then the event will fire on it.

I did a Jsfiddle http://jsfiddle.net/34j0qnpg/4/

html
<div id="playlist-wrapper">
<div id="playlist" class="playlist show-for-large-up">
    <a href="/video/1" class="large-12 columns" id="pl1">
        <div>
            <div class="large-7 columns plRight">
                <span>Titel</span>
            </div>
        </div>
    </a>

css part

body, html {
padding: 0;
margin: 0;
background-color: lightgrey;
color: #fff;
font-family: Arial;
height: 5000px;
overflow-y:scroll;
}

#stats {
  position: relative;
}

#playlist-wrapper {
    border: 1px solid #000;
    padding: 10px;
    height: 300px;
    overflow-y: scroll;
}

#playlist {
    height: 1000px;
    background-color: darkgrey;
}

var $stats = $('#stats');
$('#playlist-wrapper').on('scroll', function() {
    $stats.html('playlist scrolling');
    console.log('playlist scrolling');
});

$(window).on('scroll', function() {
    $stats.html('window scrolling');
    console.log('window scrolling');
});

Answer 4

Solved with this code: Tried it earlyer no results, after meteorjs project reset it just automagicly workded:

Template.playList.rendered = function () {
  console.log("playlist rendered");
  $('#playlist').on('scroll',function(){
    console.log('Scrolling...');
  });
}

I answered my question just if anybody is searching for the same answer.

Thanks to anybody who tried to help me.

I LOVE THIS COMMUNITY.