global scrolllistener for all »scrollable« elements

Question

To implement some effects on scrolling I have attached a global scrolling listener like that:

window.addEventListener('scroll', e => updateAllNeeded());

But in the course of the project I had to change the overall structure of the page such that there are things like those in the css:

html, body { overflow: none; }
.scrollable { overflow: auto; }

Since the scroll event does not bubble up, the listener does not work anymore and I am searching for a generic solution. I know that for instance:

[...document.querySelectorAll('.scrollable')].forEach(
  node => node.addEventListener('scroll' e => { … })
);

would do, but that would require an extra css-class for each element the listener should work for. So what I really would like to have is a test that yields a boolean value for a given node, if it has something that might be scrolled or not, such that I could do:

function canScroll (node) { /*magic here*/ }

[...document.querySelectorAll('*')].forEach(node => {
  if (canScroll(node)) node.addEventListener('scroll', e => { … })
});

UPDATE

thanks to this answer I created a test like this:

[...document.querySelectorAll('*')].filter(n => {
  return n.scrollHeight > n.offsetHeight || 
         n.scrollWidth > n.offsetWidth;
});

which is working quite fine, but I am still unsure if that is the best way to do it…