Edit in JSFiddle

(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");

            _.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)
<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 occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
            </li>
            <li>
                 <h3>Three</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>
        </ul>
    </div>
    <div id="output">
        <h3>Scroll down to see this content change, click the top-right button to log registered events for scrollable container</h3>
    </div>
</div>
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;
}

External resources loaded into this fiddle: