스크롤하는 동안 Jquery .on ( 'scroll')이 이벤트를 발생시키지 않습니다.

스크롤하는 동안 Jquery .on ( 'scroll')이 이벤트를 발생시키지 않습니다.

---

스크롤하는 동안 스크롤 이벤트가 발생하지 않습니다 ul. jQuery 버전 1.10.2를 사용하고 있습니다. ulajax 페이지에서 로드 할 때 $('ulId').on('scroll', function() {});또는 다른 라이브 방법을 사용할 수 없습니다 . 해결책을 찾도록 도와주세요.

$(document).on( 'scroll', '#ulId', function(){
    console.log('Event Fired');
});

---

당신은 아마 줄 것을 잊었다 #ID 선택기에 대한 ID를하기 전에, 당신은 줄 필요가 #전에 id즉,이ulId

아마도 ul 및 스크롤을 포함하는 div에서 스크롤 이벤트를 바인딩해야합니다. 대신 div로 이벤트를 바인딩해야합니다. ul

$(document).on( 'scroll', '#idOfDivThatContainsULandScroll', function(){
    console.log('Event Fired');
});

편집하다

스크롤 이벤트가 이벤트 위임에 사용되는 DOM에서 버블 링되지 않기 때문에 위의 내용이 작동하지 않습니다. 이 질문을 참조하십시오. 스크롤에 위임이 작동하지 않는 이유는 무엇입니까?

그러나 최신 브라우저> IE 8에서는 다른 방법으로도 가능합니다. jquery를 사용하여 위임하는 대신 document.addEventListener세 번째 인수를 사용하여 java 스크립트로 이벤트 캡처를 사용하여 수행 할 수 있습니다 true. 이 자습서 에서 버블 링 및 캡처가 어떻게 작동하는지 확인하십시오 .

라이브 데모

document.addEventListener('scroll', function (event) {
    if (event.target.id === 'idOfUl') { // or any other filtering condition        
        console.log('scrolling', event.target);
    }
}, true /*Capture event*/);

이벤트 위임이 필요하지 않은 경우 스크롤 이벤트를을 통해 위임하는 대신 ul에 직접 바인딩 할 수 있습니다 document.

라이브 데모

$("#idOfUl").on( 'scroll', function(){
   console.log('Event Fired');
});

---

ul이 ajax를 사용하여로드 된 후 스크롤 이벤트를 바인딩하면 문제가 해결되었습니다. 내 결과에서 $ (document) .on ( 'scroll', '#id', function () {...})이 작동하지 않고 ajax로드가 작동하는 것으로 확인 된 후 스크롤 이벤트를 바인딩합니다.

$("#ulId").bind('scroll', function() {
   console.log('Event worked');
}); 

ul을 제거하거나 교체 한 후 이벤트 바인딩을 해제 할 수 있습니다.

누군가를 도울 수 있기를 바랍니다.

---

VueJS를 사용하여이 질문의 모든 방법을 시도했지만 작동하지 않았습니다. 따라서 누군가가 똑같이 고군분투하는 경우 :

mounted() {
  $(document).ready(function() { //<<====== wont work without this
      $(window).scroll(function() {
          console.log('logging');
      });
  });
},

---

다른 옵션은 다음과 같습니다.

$("#ulId").scroll(function () { console.log("Event Fired"); })

참조 : 여기

---

$("body").on("custom-scroll", ".myDiv", function(){
    console.log("Scrolled :P");
})

$("#btn").on("click", function(){
    $("body").append('<div class="myDiv"><br><br><p>Content1<p><br><br><p>Content2<p><br><br></div>');
    listenForScrollEvent($(".myDiv"));
});


function listenForScrollEvent(el){
    el.on("scroll", function(){
        el.trigger("custom-scroll");
    })
}

이 게시물을 참조하십시오- 스크롤 이벤트를 동적 DIV에 바인딩 하시겠습니까?

---

ajax로드 (css display : none; 사용) 전에 문서에 #ulId를 배치하거나 포함 div (css display : none; 사용)에 래핑 한 다음 ajax 페이지로드 중에 내부 html을로드 할 수 있습니다. 그런 식으로 스크롤 이벤트가 이미 ajax 이전에 있던 div에 연결됩니까?

그런 다음 다음을 사용할 수 있습니다.

$('#ulId').on('scroll',function(){ console.log('Event Fired'); })

분명히 ulId를 스크롤 가능한 div의 실제 ID로 대체합니다.

그런 다음 css display : block; 로드시 #ulId (또는 div 포함)에?

---

나는 이것이 꽤 오래된 것이라는 것을 알고 있지만 다음과 같은 문제를 해결했습니다. 부모와 자식 요소가 스크롤 가능했습니다.

   if ($('#parent > *').length == 0 ){
        var wait = setInterval(function() {
            if($('#parent > *').length != 0 ) {
                $('#parent .child').bind('scroll',function() {
                  //do staff
                });
                clearInterval(wait);
            },1000);
        }

The issue I had is that I didn't know when the child is loaded to DOM, but I kept checking for it every second.

NOTE:this is useful if it happens soon but not right after document load, otherwise it will use clients computing power for no reason.

참고URL : https://stackoverflow.com/questions/19375636/jquery-onscroll-not-firing-the-event-while-scrolling