Get Scrollable Parent

getScrollableParent.js

function getScrollParent(node) {
  const isElement = node instanceof HTMLElement;
  const overflowY = isElement && window.getComputedStyle(node).overflowY;
  const isScrollable = overflowY !== 'visible' && overflowY !== 'hidden';

  if (!node) {
    return null;
  } else if (isScrollable && node.scrollHeight >= node.clientHeight) {
    return node;
  }

  return getScrollParent(node.parentNode) || document.body;
}

export default getScrollParent;

Thank you

In some scenarios, overflowY could be: visible !important or hidden !important
To fix that, you can use:
const isScrollable = !(overflowY.includes('hidden') || overflowY.includes('visible'));

Thanks. I rewrite like this. works good for me.

function getScrollParent(node){
if(!node) return null;
else if (node.scrollTop>0) return node;
return getScrollParent(node.parentNode) || document.documentElement;
}

Based on what @nbcp said, here's my take on it:

const REGEXP_SCROLL_PARENT = /^(visible|hidden)/

export const getScrollParent = el =>
  !(el instanceof HTMLElement) || typeof window.getComputedStyle !== 'function'
    ? null
    : el.scrollHeight >= el.clientHeight && !REGEXP_SCROLL_PARENT.test(window.getComputedStyle(el).overflowY || 'visible')
      ? el
      : getScrollParent(el.parentElement) || document.body

Thank you for sharing this beautiful code!

謝謝威廉老師~ 我們公司也在用XD 讚讚

Sometimes scrolling element is not body, so document.scrollingElement works for me. Caniuse

return getScrollParent(node.parentNode) || document.scrollingElement || document.body;

Hi everyone, a version supporting shadow dom

https://gist.github.com/oscarmarina/3a546cff4d106a49a5be417e238d9558