JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<button id="showRegisteredEvents">Show registered events</button>
<div id="scroll_pos">Scroll pos: <span>0</span>
</div>
<div class="container">
    <div id="list_container">
        <ul>
            <li id="zero">
                 <h3>Zero</h3>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
            </li>
            <li id="one">
                 <h3>One</h3>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
            </li>
            <li>
                 <h3>Two</h3>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint...

CSS

body {
    width: 100%;
    text-align: center;
}
#list_container {
    width: 500px;
    height: 200px;
    overflow: scroll;
    background-color: #007;
    color: #fff;
    text-align: left;
    margin: 50px auto 10px;
    border: 2px solid #000;
}


#list_container ul {
    list-style-type: none;
    padding: 0;
    margin: 0 0 0px;
    padding: 10px 0 50px;
}
#list_container ul li {
    border: 1px solid #000;
    padding: 10px;
}
#list_container ul li h3 {
    margin: 0;
}
#showRegisteredEvents {
    position: fixed;
    top: 10px;
    right: 10px;
}
#output {
    border: 1px solid #000;
    padding: 10px;
}
#scroll_pos {
    position: fixed;
    top: 10px;
    left: 10px;
}

JavaScript

(function ($) {
    $(document).ready(function () {
        var $container = $('#list_container')
        var colors = ['#f00', '#f70', '#dd0', '#0d0']
        var $output = $('#output');

        function findRegisteredEventsForContainer() {
            alert('Check your console for events attached to the scrollable container!')
            var container = document.getElementById('list_container')
            var events = $._data(container, "events");
						console.log(JSON.stringify($._data(window, "events")))
            _.each(events, function (registeredFns, eventName) {
                _.each(registeredFns, function (fn, index) {
                    console.log('Event:' + eventName, fn.handler.toString());
                })
            })
        }

        $container.find('ul li').each(function (index, el) {
            $(this).waypoint({
                handler: function () {
                    $container.css({
                        'background-color': colors[index]
                    });

                    $output.html($(this.element).html());
                },
                context: $container
            });
        });

        $container.on('scroll', function writeScrollPosition() {
            $('#scroll_pos span').text($(this).scrollTop());
        });

        $container.on('scroll', function userHasScrolledToBottom() {
            if ($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) {
                $(this).css('background-color', '#fff');
                $output.html('<h3>You hit the bottom of the scrollable container!  Scroll up!</h3>');
            }
        })


        $('#showRegisteredEvents').on('click', findRegisteredEventsForContainer);

    });
})(jQuery)