javascript - 检测正在滚动的元素

Question

我的页面上有一些 div 设置为溢出：滚动，如下所示：

如何检测当前正在滚动哪个元素或者是否将滚动应用于正文？Event.target 仅返回应用滚动时鼠标当前悬停的元素，而不是实际目标。

window.onscroll = function(e){

	console.log(e.target);

}

body{
  background: white;
}

div{
  height: 50px;
  overflow: scroll;
  margin: 25px;
  background: black;
  color: white;
}

<div>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
</div>

<div>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
</div>

Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>

提前致谢！

标签： javascripthtmlcssscroll

Answer 1

更改事件绑定以div直接绑定元素。如果div没有任何溢出，它将无法滚动，因此不会触发事件。

// Find all the scrollable divs and loop through the collection of them
document.querySelectorAll("div").forEach(function(div){

  // Bind each to a scroll event listener
  div.addEventListener("scroll", function(){
	  console.log(this.id);
  });

});

body{
  background: white;
}

div{
  height: 50px;
  overflow: scroll;
  margin: 25px;
  background: black;
  color: white;
}

<div id="something">
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
</div>

<div>Not enough here for scroll event</div>

<div id="something else">
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
</div>

Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>