Optimize and refactor getScrollElement

Author: Aljullu

src/hoc/trackWindowScroll.js

@@ -4,7 +4,7 @@ import { PropTypes } from 'prop-types';
 import debounce from 'lodash.debounce';
 import throttle from 'lodash.throttle';
 import isIntersectionObserverAvailable from '../utils/intersection-observer';
-import getScrollElement from '../utils/get-scroll-element';
+import getScrollAncestor from '../utils/get-scroll-ancestor';
 
 const getScrollX = () =>
 	typeof window === 'undefined' ? 0 : window.scrollX || window.pageXOffset;
@@ -54,7 +54,7 @@ const trackWindowScroll = BaseComponent => {
 				return;
 			}
 
-			const scrollElement = getScrollElement(
+			const scrollElement = getScrollAncestor(
 				ReactDom.findDOMNode(this.baseComponentRef.current)
 			);
 
@@ -69,7 +69,7 @@ const trackWindowScroll = BaseComponent => {
 				return;
 			}
 
-			this.scrollElement = getScrollElement(
+			this.scrollElement = getScrollAncestor(
 				ReactDom.findDOMNode(this.baseComponentRef.current)
 			);
 

src/utils/get-scroll-ancestor.ts

@@ -0,0 +1,35 @@
+// Adapted from https://github.com/loktar00/react-lazy-load/blob/master/src/utils/parentScroll.js
+
+const getElementOverflowValues = (element: HTMLElement) : string => {
+	const computedStyle = getComputedStyle(element, null);
+
+	return (
+		computedStyle.getPropertyValue('overflow') +
+		computedStyle.getPropertyValue('overflow-y') +
+		computedStyle.getPropertyValue('overflow-x')
+	);
+};
+
+const getScrollAncestor = (element: Node) : HTMLElement | Window => {
+	if (!(element instanceof HTMLElement)) {
+		return window;
+	}
+
+	let parent : Node = element;
+
+	while (parent) {
+		if (!(parent instanceof HTMLElement)) {
+			break;
+		}
+
+		if (/(scroll|auto)/.test(getElementOverflowValues(parent))) {
+			return parent;
+		}
+
+		parent = parent.parentNode;
+	}
+
+	return window;
+};
+
+export default getScrollAncestor;

src/utils/get-scroll-element.js

@@ -12,7 +12,7 @@ module.exports = {
 	module: {
 		rules: [
 			{
-				test: /\.jsx?$/,
+				test: /\.(j|t)sx?$/,
 				include: path.resolve(__dirname, 'src'),
 				exclude: /(node_modules|bower_components|build)/,
 				use: {
@@ -46,4 +46,7 @@ module.exports = {
 			extensions: ['js', 'jsx', 'ts', 'tsx'],
 		}),
 	],
+	resolve: {
+		extensions: ['.ts', '.tsx', '.js', '.jsx'],
+	},
 };