How to control scrolling per mouse notch for IE 11 using JQuery/Javascript

Question

I have 2 nested s in my HTML file. When scrolling hits the top or bottom of the Child Div, the Body div starts scrolling as well. To stop that, I have wrote a Function that is called from/on "OnScroll" event from the HTML child so that I can make the scrolling independent for the child and Parent div.

The function that I wrote is as follows:

function selectiveScroll(elementObj)
{
    $(elementObj).bind('mousewheel DOMMouseScroll wheel', function(e) 
    {
        var scrollTo = 0;

        if (e.type == 'mousewheel') 
        {       
            scrollTo = (e.originalEvent.wheelDelta)/(-120);
            //alert("mousewheel " + e.originalEvent.wheelDelta + " " + scrollTo  );
        }
        else if (e.type == 'wheel') 
        {
            //alert("wheel " + e.originalEvent.wheelDelta + " " + scrollTo);
            scrollTo = (e.originalEvent.wheelDelta * -1)/80;
        }
        else if (e.type == 'DOMMouseScroll') 
        {
            //alert("DOMMouseScroll " + e.originalEvent.detail);
            scrollTo = 40 * e.originalEvent.detail;
        }

        if (scrollTo) 
        {
            //alert("scrollTo " + scrollTo );           
            $(this).scrollTop($(this).scrollTop() + scrollTo);
            e.preventDefault();
        }
    });
}

For google Chrome browser this fix worked, but for IE 11, the mouse scroll is restricted to Child and parent, but when the child scrolls, after the initial scrolling hits the end 1 notch in up/down direction of the mouse wheel scrolls all the way up or all the way to bottom of the child.

I understand that: For IE: mousewheel is the event listener For Chrome: Wheel is the event listener For FireFox: DomMouseScroll is the event listener

But I don't understand the first 'If' block "scrollTo = (e.originalEvent.wheelDelta)/(-120);" Part.

How do I control how much scrolling happens with 1 notch of the mouse wheel for IE?

Zhi Lv Zhi Lv · Accepted Answer · 2019-04-24T05:21:00

With refer to this article, we can know that the wheelDelta attribute value is 120 per notch.

scrollTo = (e.originalEvent.wheelDelta)/(-120);

so, if you are using the above code, it will scroll to the top of the container.

Besides, from this article, it seems that the mousewheel Equivalent of wheel.So, I suggest you could refer to the following code:

when you scroll the mouse one time, it will scroll next 120 position.

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        body {
            min-height: 1200px;
        }

        div#abs {
            position: absolute;
            top: 50px;
            left: 30px;
            height: 400px;
            width: 200px;
            background-color: gray;
            overflow: scroll;
        }
    </style>
    <script>
        $(function () {
            $('#abs').bind('mousewheel DOMMouseScroll', function (e) {
                var scrollTo = 0;
                e.preventDefault();
                if (e.type == 'mousewheel') {
                    scrollTo = (e.originalEvent.wheelDelta * -1);
                    //scrollTo = (e.originalEvent.wheelDelta)/(-120);
                    alert("w" + e.originalEvent.wheelDelta);
                }
                else if (e.type == 'DOMMouseScroll') {
                    scrollTo = 40 * e.originalEvent.detail;
                    alert("d" + e.originalEvent.detail);
                }
                $(this).scrollTop(scrollTo + $(this).scrollTop());

            });

        });
    </script>
</head>
<body>
    <div id="output"></div>
    <div id="output2"></div>
    <div id="abs">
        Absolutely positioned div
        <br />
        <br />
        <br />
        <br />
        That
        <br />
        <br />
        <br />
        Is
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        Long
        <br />
        <br />
        <br />
        <br />
        That
        <br />
        <br />
        <br />
        Is
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        That
        <br />
        <br />
        <br />
        Is
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        That
        <br />
        <br />
        <br />
        Is
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        That
        <br />
        <br />
        <br />
        Is
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
    </div>
</body>

the result like this:

How to control scrolling per mouse notch for IE 11 using JQuery/Javascript

1 Answers