MouseWheel Event not working in IE?

Question

I am trying to move the page Horizontally using Scroll Wheel. And I got succeed in Chrome, but when I try to run it on IE it does not work.

Then I read on msdn website that event.wheelDelta is used to Gets the distance that a mouse wheel has rotated around the y-axis. But then also when I see the Console window for log it will showing undefined. console.log(event.wheelDelta);

Here is My Java Script

     $(document).ready(function () {

        function extractDelta(e) {
            console.log(e.wheelDelta); 

            if (e.wheelDelta) {
                return e.wheelDelta;
            }

            if (e.originalEvent.detail) {
                return e.originalEvent.detail * -40;
            }

            if (e.originalEvent && e.originalEvent.wheelDelta) {
                return e.originalEvent.wheelDelta;
            }
        }

        $(window).on("DOMMouseScroll wheel", function (event) {
            var delta = extractDelta(event);
            var $this = $(this);
            //debugger;
            //var delta = event.detail < 0 || event.originalEvent.wheelDelta > 0 ? 1 : -1;
            console.log(delta);
            if (delta > 0) {
                $this.scrollLeft(($this.scrollLeft() - 400));
            } else {
                $this.scrollLeft(($this.scrollLeft() + 400));
            }

            //this.scrollLeft -= (this.scrollLeft + 500);

            event.stopPropagation();
            event.preventDefault();

        });

please can anyone explain me why this is not functioning on IE. I am using IE 11 and jQuery 2.0.3 and jQuery MouseWheel 3.0.4.

Answer 1

Jquery doesn't pass along the IE event object. If you want the MS specific properties you have to use addeventlistener instead of on

Answer 2

Try using jQuery's bind function:

$(window).bind("DOMMouseScroll wheel", function (event) {
  // Code goes here
});