Detecting .scroll on div with jQuery

Question

EDIT: looks like I was approaching this from the wrong direction, will see if I can close this. Future reading:

Get mouse wheel events in jQuery?

---

I'm trying to create a scrollable <div> element (on a horizontal plane); not there with the maths yet but I'm having trouble with something more basic - the scroll event doesn't seem to be registering. Am I missing anything obvious?

I've taken out all the CSS associated with the <div> barring what you see in the samples below:

<div id="about-carousel" carousel-offset="0" style="height:20rem; background-color:red;">

</div>

$(document).ready(function() {
    handleCarousels(['#about-carousel']);
});

function handleCarousels(idArray) {
    for(var n in idArray) {
        var target = idArray[n];
        // this works
        $(target).click(function() {
            console.log('clicked');
        });

        // this doesn't
        $(target).scroll(function(e) {
            e.stopPropagation();
            console.log('scrolls');
        });
    }
}

According to this answer the element needs to have overflow: scroll set, but that makes no difference. Even if I fill the <div> with images, it doesn't trigger the .scroll event at all.

Any ideas?

UPDATE BEFORE POSTING: the 'scrolls' message is being output to console if I set the div to overflow: scroll and fill it with images, but only when I drag the scroll bar. I thought it was meant to capture mouse events too?

I'm using jQuery 1.11.1.