스크롤하는 동안 이벤트가 실행되지 않는 Jquery.on('스크롤')

스크롤하는 동안 이벤트가 실행되지 않는 Jquery.on('스크롤')

스크롤 이벤트가 발생하지 않는 동안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에서 스크롤 이벤트를 바인딩해야 할 수도 있습니다.이벤트를 ul이 아닌 div로 바인딩해야 합니다.

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

편집

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

그러나 현대 브라우저 > IE 8에서는 다른 방법으로 할 수 있습니다.jquery를 사용하여 위임하는 것이 아니라 javascript로 이벤트 캡쳐를 사용하여 수행할 수 있습니다.document.addEventListener, 세 번째 논변으로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를 사용하여 로드된 후 스크롤 이벤트를 바인딩하면 문제가 해결되었습니다.('scroll', '#id', function () {...)에 대한 나의 연구 결과($document.})이(가) 작동하지 않으며 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에 바인딩?

이것이 꽤 오래된 일이라는 것을 알지만, 저는 그와 같은 문제를 해결했습니다.부모와 자식 요소는 스크롤이 가능합니다.

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

문제는 아이가 언제 DOM에 실릴지 몰랐는데 매초마다 계속 확인하고 있다는 것입니다.

참고: 문서를 로드한 직후가 아니라 곧 발생할 경우 유용합니다. 그렇지 않으면 클라이언트의 컴퓨팅 성능이 이유 없이 사용됩니다.

문서에 #ulId를 ajax load 이전에 배치할 수 있습니까(cs display: none; 포함), 또는 포함된 div(cs display: none; 포함)에 랩핑할 수 있습니까? ajax 페이지 로드 중에 내부 html을 로드하면 스크롤 이벤트가 ajax 이전에 이미 있는 div에 연결됩니다.

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

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

ulId를 스크롤 가능한 디브의 실제 ID로 대체하는 것이 분명합니다.

그런 다음 로드 시 #ulId(또는 포함 div)에 CSS display: block;를 설정합니까?

페이지 로드 후 바로 스크롤 가능한 요소가 나타나지 않는다는 문제를 해결했습니다.

$(document).ready(function () {
   var checkIt = setInterval(function (){
       if($('body').find('.scrollable-wrapper').length > 0){
           clearInterval(checkIt);
           jQuery('.scrollable-wrapper').on('scroll', function () {
               console.log(1)
           });
       }
   },100)
});

요소가 있는 것을 발견하면 간격이 중지되고 이벤트가 실행되어 청취됩니다.

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