JSFiddle - React, Tailwind, and code Playground

HTML

<div id="playlist-wrapper">
<div id="playlist" class="playlist show-for-large-up">
        <a href="/video/1" class="large-12 columns" id="pl1">
            <div>
                <div class="large-7 columns plRight">
                    <span>Titel</span>
                </div>
            </div>
        </a>
</div>
    </div>

<div id="stats"></div>

CSS

body, html {
    padding: 0;
    margin: 0;
    background-color: lightgrey;
    color: #fff;
    font-family: Arial;
    height: 5000px;
    overflow-y:scroll;
}

#stats {
  position: relative;
}

#playlist-wrapper {
    border: 1px solid #000;
    padding: 10px;
    height: 300px;
    overflow-y: scroll;
}

#playlist {
    height: 1000px;
    background-color: darkgrey;
}

JavaScript

var $stats = $('#stats');
$('#playlist-wrapper').on('scroll', function() {
    $stats.html('playlist scrolling');
    console.log('playlist scrolling');
});

$(window).on('scroll', function() {
    $stats.html('window scrolling');
    console.log('window scrolling');
});