Scroll Events in MooTools

HTML

<div class="scrollable">
    <div class="lotsOfContent"></div>
</div>

CSS

.scrollable {
    width: 200px;
    height: 300px;
    overflow: hidden;
    overflow-y: auto;
    border: 1px solid #999;
    box-shadow: 0 4px 16px 0 black;
    margin: 20px;
}

.lotsOfContent {
    height: 900px;
    width: 100%;
    
background: #595c5a;
background-image: -webkit-linear-gradient(top, #888a85 0%, #555753 50%, #2e3436 100%);
background-image: -moz-linear-gradient(top, #888a85 0%, #555753 50%, #2e3436 100%);
background-image: -o-linear-gradient(top, #888a85 0%, #555753 50%, #2e3436 100%);
background-image: -ms-linear-gradient(top, #888a85 0%, #555753 50%, #2e3436 100%);
background-image: linear-gradient(top, #888a85 0%, #555753 50%, #2e3436 100%);


}

JavaScript

//Element.NativeEvents.scroll = 2;
Element.Events.scrolltop = {
    base: 'scroll',
    condition: function(event) {
        console.log('condition ran');
        return (this.scrollTop === 0);
    }
};

window.addEvent('domready', function() {

    var $scrollable = $$('.scrollable');

    // This event will continually fire because the condition
    // is never run. It should only fire when the scrollbar is
    // in it's topmost position.
    //
    // If you uncomment teh 1st line, turning the scroll event
    // into a type-2 event, then the custom event runs properly.
    $scrollable.addEvent('scrolltop', function() {
        console.log('top');
    });
    $scrollable.addEvent('scroll', function() {
        console.log('scroll');
    });
});