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

问题描述

我的 HTML 文件中有 2 个嵌套的 s。当滚动到达 Child Div 的顶部或底部时，Body div 也开始滚动。为了阻止这种情况，我编写了一个函数，该函数从 HTML 子项的“OnScroll”事件中调用，以便我可以使子项和父 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();
        }
    });
}

对于谷歌 Chrome 浏览器，此修复有效，但对于 IE 11，鼠标滚动仅限于子级和父级，但是当子级滚动时，在初始滚动到达终点后，鼠标滚轮向上/向下方向的 1 个凹槽滚动所有一路向上或一直到孩子的底部。

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

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

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

标签： javascriptjqueryinternet-explorer-11mousewheel

参考这篇文章，我们可以知道 wheelDelta 属性值为 120 per notch。

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

因此，如果您使用上面的代码，它将滚动到容器的顶部。

另外，从这篇文章看来，mousewheel 好像是wheel 的等价物。所以，我建议你可以参考下面的代码：

当您滚动鼠标一次时，它将滚动下一个 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>

结果是这样的：

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

问题描述

解决方案

推荐阅读