1

ページにいくつかの 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>

前もって感謝します！

4

2 に答える 2

4

イベント バインディングを変更して、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>

于 2019-11-01T21:59:27.340 に答える
2

編集: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>

于 2019-11-01T21:59:43.017 に答える