scrollParent use case

one use case for scrollParent out of my sleeve

HTML

<div id="page">
	<h2>Scroll-aware elements</h2>
	<p>
		Try scrolling to bottom.
		<br> Special items will highlight when their list reach bottom.
		<br>
	</p>
	<p>
		Use cases can be to stop animating or events of out-of-sight elements, imlpementing infinite scroll, motion effect, and more.
	</p>
	<div class="outer_wrapper">


		<div class="content_wrapper">
			<div class="item">.</div>
			<div class="item">..</div>
			<div class="item item-special">special item</div>
			<div class="item">.</div>
			<div class="item">..</div>
			<div class="item item-special">special item</div>
			<div class="item">.</div>
			<div class="item">..</div>
			<div class="item item-special">special item</div>
			<div class="item">.</div>
			<div class="item">..</div>
			<div class="item item-special">special item</div>
		</div>

		<div class="content_wrapper">
			<div class="item">.</div>
			<div class="item">..</div>
			<div class="item item-special">special item</div>
			<div class="item">.</div>
			<div class="item">..</div>
			<div class="item item-special">special item</div>
			<div class="item">.</div>
			<div class="item">..</div>
			<div class="item item-special">special item</div>
			<div class="item">.</div>
			<div class="item">..</div>
			<div class="item item-special">special item</div>
		</div>

		<div class="content_wrapper">
			<div class="item">.</div>
			<div class="item">..</div>
			<div class="item item-special">special item</div>
			<div class="item">.</div>
			<div class="item">..</div>
			<div class="item item-special">special item</div>
			<div class="item">.</div>
			<div class="item">..</div>
			<div class="item item-special">special item</div>
			<div class="item">.</div>
			<div class="item">..</div>
			<div class="item item-special">special item</div>
		</div>
	</div>

	<div class="content_wrapper">
		<div class="item">.</div>
		<div class="item">..</div>
		<div class="item item-special">special item</div>
		<div class="item">.</div>
		<div...

CSS

.item {
    display: block;
    margin: 5px 0;
    padding: 5px;
    border-radius: 5px;
    background: #99f;
    color: #fff;
    font-size: 9px;
    text-align: center;
}

.item-special {
    color: #000;
}

.item-special.at_bottom {
    background: #f99;
}

.content_wrapper {
    display: block;
    float: left;
    width: 150px;
    height: 200px;
    overflow: auto;
    margin: 5px 10px;
}

.outer_wrapper {
    display: block;
    width: 100%;
    height: 150px;
    overflow: auto;
    margin: 5px 10px;
    border: 2px solid #ccc;
}

JavaScript

$(function() {
    var specials = document.querySelectorAll('.item-special');
    specials.forEach(function(e) {
        var scrollParent = $(e).scrollParent()[0];
        scrollParent.addEventListener('scroll', function(ev) {
            var at_bottom = this.scrollTop == this.scrollHeight - this.offsetHeight;
            e.classList.toggle('at_bottom', at_bottom);
        });
    });
});