爲什麼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

是否出現「滾動」？我不認爲有這麼小的內容，「滾動」將出現... – Rayon

可能重複[爲什麼不委派工作滾動？]（http://stackoverflow.com/questions/9253904/why-doesnt -delegate工作換滾動） –

滾動事件元素不冒泡：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。希望這會幫助你。請參閱此工作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滾動事件不會觸發？

回答

相關問題