사용자가 컨테이너 div의 맨 아래로 스크롤하는시기를 확인하는 방법은 무엇입니까? 무한 스크롤 용

http://jsfiddle.net/leonwho/L9A6Q/

웹 사이트 대시 보드에서 무한 스크롤을 개발할 준비를하고 있지만 jsfiddle mockup 에서 컨테이너 div의 하단을 결정하는 방법에 대해 고민하고 있습니다.

컨테이너 div가없는 빈 페이지에서 작동하는 원래 함수

var wireInfinScroll = function() {

    console.log('in wireInfinScroll');

    $('#scroll_screen').scroll(function(){

        console.log('scrolling...');
        console.log(' ');

        //if ($('#scroll_screen').scrollTop() == $('#content').height() -     $('#scroll_screen').outerHeight()) {

        if ($('#scroll_screen').scrollTop() == $('#content').height() - $('#scroll_screen').height()) {
            // run our call for pagination
            console.log('Bottom of Page!');
            alert('Bottom of Page!');
        }
    });
}

wireInfinScroll();

CSS

#scroll_screen {
  overflow-y: auto;
  background: pink;
}

내 예제에서 window스크롤되는 div ( #scroll_screen)로 바꾸려고 시도했지만 경고를 트리거 할 수 없습니다.

이 문제에 어떻게 접근했을까요?

업데이트

• 여기에 동일한 코드를 사용하여 새 jsFiddle을 만들었습니다. http://jsfiddle.net/leonwho/L9A6Q/

• 또한 #scroll_screendiv 내부를 클릭하지 않으면 console.logs가 표시되지 않습니다 .

• Codepen을 삭제하고 jsFiddle을 사용하여 조금 더 나아갔습니다. $('#scroll_screen').scroll(function(){

• 노트! 내가 제거하면 height: 100%으로부터 #contentDIV, 다음 아래로 스크롤 나는 마침내 내 얻을 백업 경고를 하지만, 이것은 여전히 올바르지 않습니다. 경고 스크롤 아래에서 발생한다

CSS

   #content {
     float: right;
     width: 79%;
     //height: 100%;
     background: #f8f8f8;
   }