How to disable mousewheel panning in javascript/jquery?

Question

I have a div, which has

.A {
    max-height:100px;
    overflow-y: hidden;
}

I don't want it to scroll. However I noticed the user can still click down with a mousewheel then move the mouse up or down and it simulates a scroll. The div box goes up and down. How can I disable this?

https://jsfiddle.net/2aoeyfbL/

Thanks

Answer 1

This seems to work all the time, even by pressing tab when there is an input box inside the div.

$('.A').bind("scroll", function(e) {
    this.scrollTop = 0;
});

Answer 2

Fix the position of the div

.A {
    max-height:100px;
    overflow-y: hidden;
    position:fixed;
}