Question

向下滚动时，scroll事件不会触发。不知道我在这里做错了什么。

以下是我的代码：

<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>

Answer 1

滚动事件不会为元素冒泡：MDN: Events scroll

<强>气泡不是元素，而是在文档上触发时向默认视图冒泡

因此您无法使用事件委派。您始终需要将事件侦听器直接添加到发生该事件的元素：

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

或者使用vanilla JavaScript并在捕获阶段捕获事件，如下所述：[...]But, on modern browsers (IE>8), you can capture scroll event to e.g document level or any static container for dynamic element.[...]

Answer 2

这是您检测scrolling和scroll position的方法。希望这对您有所帮助。请参阅此工作demo.scroll以查看。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	
</head>

<style type="text/css">
body{
	height: 1000px;
}

div#scroll{
	width: 300px;
	height: 200px;
	overflow: scroll;
	background-color: orange;
	color: white;
	text-align: center;
	font-size: 20px;
	font-family: monospace;
}

</style>


<body>
	<div id="scroll">
	 <li>one one</li>
	 <li>one one</li>
	 <li>one one</li>
	 <li>one one</li>
	 <li>one one</li>
	 <li>one one</li>
	 <li>one one</li>
	 <li>one one</li>
	 <li>one one</li>
	 <li>one one</li>
	 <li>one one</li>
	 <li>one one</li>
	</div>

</body>

<script type="text/javascript">

$("div#scroll").scroll(function(){
	alert("scrolling");
	var scrollPosition = $(this).scrollTop();
	alert(scrollPosition);
});



</script>
</html>

为什么jQuery滚动事件没有触发？

2 个答案: