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 'が表示されていますか？私はそのような小さなコンテンツでは、 "スクロール"が表示されるとは思わない... – Rayon

[なぜスクロールの仕事を委任しないのですか？]（http://stackoverflow.com/questions/9253904/why-doesnt -delegate-work-for-scroll） –

スクロールイベントは、要素のためにバブルをしません：MDN: Events scroll

バブルに ない要素ではなく、文書で焼成したときのデフォルトのビューに泡

そのため、イベントの委任は使用できません。

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

それともバニラはJavaScriptを使用して、ここで説明するようにキャプチャ段階でイベントをキャプチャ：あなたは、常にそのイベントが発生した要素に直接イベントリスナーを追加する必要が[...]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のスクロールイベントが発生しないのはなぜですか？

答えて

関連する問題