jQuery 스크롤 이벤트가 실행되지 않는 이유는 무엇입니까?

아래로 스크롤하면 scroll 이벤트가 실행되지 않습니다. 내가 여기서 뭘 잘못하고 있는지 잘 모르겠다.jQuery 스크롤 이벤트가 실행되지 않는 이유는 무엇입니까?

<style> 
    #scroll { 
    max-height: 100px; 
    overflow-y: auto; 
    width: 647px; 
    margin: auto; 
    } 
</style> 
<body> 
    <div id='scroll'> 
    <p>hello world</p> 
    <p>hello world</p> 
    <p>hello world</p> 
    <p>hello world</p> 
    <p>hello world</p> 
    <p>hello world</p> 
    <p>hello world</p> 
    </div> 
    <script> 
    $(document).on("scroll", "#scroll", function() { 
     console.log("hi"); 
    }); 
    </script> 
</body>

출처

2016-09-15 json5

당신이 jQuery를 포함했다 당신은 항상 그 이벤트의 발생에 요소에 직접 이벤트 리스너를 추가해야합니까? 확인하는 좋은 방법은 브라우저에서 개발자 도구를 여는 것입니다. – Rohit

'scroll '이 표시됩니까? 나는 그런 작은 내용으로 생각하지 않는다. "scroll"이 나타날 것이다 ... – Rayon

[스크롤을위한 작업을 위임하지 않는 이유는 무엇입니까?] (http://stackoverflow.com/questions/9253904/why-doesnt -delegate-work-for-scroll) –

스크롤 이벤트 요소에 대한 거품을하지 않습니다 : MDN: Events scroll

거품을 하지 요소,하지만 문서에 발사 할 때 기본보기에 거품

때문에 이벤트 위임을 사용할 수 없습니다.

$('#scroll').on('scroll', function() { 
}

또는 바닐라 자바 스크립트를 사용하고 여기에 설명 된대로 캡처 단계에서 이벤트를 캡처 : [...]But, on modern browsers (IE>8), you can capture scroll event to e.g document level or any static container for dynamic element.[...]

출처

2016-09-15 05:04:01

이 당신이 당신에게 도움이 될 것입니다 scrolling 및 scroll position .hope을 감지 할 수있는 방법입니다

다음은 내 코드입니다. 보려면이 작업 demo.scroll을 참조하십시오.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
\t 
 
</head> 
 

 
<style type="text/css"> 
 
body{ 
 
\t height: 1000px; 
 
} 
 

 
div#scroll{ 
 
\t width: 300px; 
 
\t height: 200px; 
 
\t overflow: scroll; 
 
\t background-color: orange; 
 
\t color: white; 
 
\t text-align: center; 
 
\t font-size: 20px; 
 
\t font-family: monospace; 
 
} 
 

 
</style> 
 

 

 
<body> 
 
\t <div id="scroll"> 
 
\t <li>one one</li> 
 
\t <li>one one</li> 
 
\t <li>one one</li> 
 
\t <li>one one</li> 
 
\t <li>one one</li> 
 
\t <li>one one</li> 
 
\t <li>one one</li> 
 
\t <li>one one</li> 
 
\t <li>one one</li> 
 
\t <li>one one</li> 
 
\t <li>one one</li> 
 
\t <li>one one</li> 
 
\t </div> 
 

 
</body> 
 

 
<script type="text/javascript"> 
 

 
$("div#scroll").scroll(function(){ 
 
\t alert("scrolling"); 
 
\t var scrollPosition = $(this).scrollTop(); 
 
\t alert(scrollPosition); 
 
}); 
 

 

 

 
</script> 
 
</html>

출처

2016-09-15 04:57:18

jQuery 스크롤 이벤트가 실행되지 않는 이유는 무엇입니까?

답변

관련 문제