Disable mouse wheel scrolling on ListBox

Question

I have a ListBox on an MVC page:

@Html.ListBox("lstFacilitySelection", Model.FacilityOptionList, new { id = "FacilityListBox", Multiple = "multiple", Size = 5, style = "width: 50%;" })

How can I disable the mouse's wheel scrolling for this ListBox, so that the scroll bar at the side of the control has to be used?

Edit: The solution as proposed by Ashwini Verma with a slight modification:

$(document).ready(function () {
    $('#FacilityListBox').on({
        'mousewheel': function (e) {
            if (e.target.id == 'el') return;
            e.preventDefault();
            e.stopPropagation();
        }
    })
});

Answer 1

You can disable it using jquery. See working demo here.

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

$(document).ready(function(){    
    $('body').on({
        'mousewheel': function(e) {
            if (e.target.id == 'el') return;
            e.preventDefault();
            e.stopPropagation();
        }
    })
});