检测正在滚动的元素

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>

提前致谢！

Answer 1

编辑：我添加了一个功能

isScrollable

，这样如果你的滚动条div不可滚动（例如大屏幕或没有足够的内容），它们不会被视为可滚动元素。

您可以尝试遍历目标的祖先，直到找到可滚动的：

window.addEventListener('scroll', function(e) {
  var el = e.target;
  while (el && el !== document && !isScrollable(el)) {
  	el = el.parent;
  }
  log('Scrolled element: '+ (el.className || 'document'));
}, true);

function isScrollable(el) {
  return el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;
}

function log(x) {
  document.querySelector('h2').innerHTML = x;
}

/* Some CSS for the demo... */.scroller{width:6em;height:6em;float:left;overflow:scroll;border:4px solid #ddd;margin:.5em;position: relative}.inside{content:"";display:block;width:100em;height:100em;background:url(https://cms-assets.tutsplus.com/uploads/users/1604/posts/28343/image/WatermelonOrangePatternFinal.png)}.scroller.d .inside{width:100%;height:100%;opacity:.5}.scroller.d::before{position: absolute;z-index:5;content:"Not scrollable (not enough content)";font-size:.8em;}body{color:#fff;font-family:Arial,Helvetica,sans-serif}body::after{content:"";display:block;width:100em;height:100em;background:url(https://365psd.com/images/previews/b0c/icon-pattern-backgrounds-53906.jpg)}h2{position:fixed;bottom:.2em;left:0;width:100%;text-align:center}

<div class="scroller a"><div class="inside"></div></div>
<div class="scroller b"><div class="inside"></div></div>
<div class="scroller c"><div class="inside"></div></div>
<div class="scroller d"><div class="inside"></div></div>
<h2>Try scrolling</h2>

Answer 2

更改事件绑定以直接绑定

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>

Answer 3

Chrome 130 在开发工具的元素面板中引入了新的滚动徽章来定位可滚动元素
https://developer.chrome.com/blog/swe-devtools-scroll-badge