javascripthtmlcssscroll

Detect element that is being scrolled

I have some divs on my page set to overflow: scroll, like so:

enter image description here

How can I detect which element is currently being scrolled or if the scroll is applied to the body? Event.target only returns the element over which the mouse is currently hovering as the scroll is applied, not the actual 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>

Thanks in advance!

Solution

  • Edit: I added a function isScrollable so that if your scroller divs are not scrollable (eg. big screens or not enough content), they are not considered as a scrollable element.

    You can try going through the ancestors of the target until you find one that is scrollable:

    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>