如何使用 JQuery/Javascript 控制 IE 11 的每个鼠标槽口滚动

Question

我的 HTML 文件中有 2 个 nested 。当滚动到达 Child Div 的顶部或底部时，正文 div 也开始滚动。为了阻止它，我写了一个函数，从 HTML child 中调用了 from/on "OnScroll" 事件，这样我就可以使 child 的滚动独立和 Parent div。

我写的函数如下：

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();
        }
    });
}

对于 google Chrome 浏览器，此修复有效，但对于 IE 11，鼠标滚动仅限于 Child 和 parent，但当 child 滚动，在初始滚动到达 up/down 方向的末端 1 槽口后，鼠标滚轮一直向上滚动或一直滚动到 child 的底部。

我了解到：对于 IE：mousewheel 是事件监听器对于 Chrome：Wheel 是事件监听器对于 FireFox：DomMouseScroll 是事件侦听器

但是我不明白第一个'If'块"scrollTo = (e.originalEvent.wheelDelta)/(-120);"部分。

如何控制 IE 鼠标滚轮滚动 1 格时的滚动量？

Answer 1

参考this article可知wheelDelta属性值为120/notch

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

所以，如果您使用上面的代码，它会滚动到容器的顶部。

另外，从this article看来，mousewheel等价于wheel.So，建议你可以参考下面的代码：

鼠标滚动一次，会滚动下一个120位置。

<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>

结果是这样的：

如何使用 JQuery/Javascript 控制 IE 11 的每个鼠标槽口滚动

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

javascript

jquery

mousewheel

internet-explorer-11