JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
    <div class="inner">
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        hello
    </div>
</div>

CSS

.outer {
    overflow: auto;
    padding: 5px;
    height: 50px;
}

.inner {
    background: blue;
    color: white;
}

JavaScript

$.fn.extend({
	scrollParent: function() {
		var scrollParent;
		scrollParent = this.parents().filter(function() {
			return (/(auto|scroll|hidden)/).test($.css(this,'overflow')+$.css(this,'overflow-y')+$.css(this,'overflow-x'));
		}).eq(0);
		return (/fixed/).test(this.css('position')) || !scrollParent.length ? $(document) : scrollParent;
	}	
});

alert($(".inner").scrollParent()[0]);