禁用 ctrl +鼠标在网页上滚动

Question

如何使用 jquery 禁用网页上的 CTRL + 鼠标滚动？

我想在我的网页上禁用放大和缩小！

Answer 1

是的，您可以这样做：

$(window).keydown(function(event) 
{
    if((event.keyCode == 107 && event.ctrlKey == true) || (event.keyCode == 109 && event.ctrlKey == true))
    {
        event.preventDefault(); 
    }

    $(window).bind('mousewheel DOMMouseScroll', function(event) 
    {
        if(event.ctrlKey == true)
        {
            event.preventDefault(); 
        }
    });
});

这只适用于 Firefox、Chrome 和 Opera。它不适用于 Internet Explorer。

Answer 2

这是不可能的。

相反，您应该设计页面以支持缩放。

Answer 3

你可以这样做，我在chrome、filefox和ie上测试过。效果很好

(function () {

        /**
         * Main stopscrollwheelzoom constructor
         */
        let SSWZ = function () {

            /**
             * Handler for scroll- control must be pressed.
             * @param e
             */
            this.keyScrollHandler = function (e) {
                if (e.ctrlKey) {
                    e.preventDefault();
                    return false;
                }
            }
        };

        if (window === top) {
            let sswz = new SSWZ();
            window.addEventListener('wheel', sswz.keyScrollHandler, { passive: false });
        }

    })();

Answer 4

更新了答案，没有 Jquery，也没有副作用。

let handlingScroll = false;
    window.addEventListener('keydown', function (event) {
        if (event.ctrlKey === true && handlingScroll === true) {
            event.preventDefault();
        }
    }, {passive: false});

    window.addEventListener('wheel', function (event) {
        if (event.ctrlKey === true) {
            handlingScroll = true
            //set timeout to reset the handlingScroll variable after the scroll event is finished
            setTimeout(() => {
                handlingScroll = false
            }, 10)
            event.preventDefault();
        } else {
            handlingScroll = false
        }
    }, {passive: false});

我仅使用滚动事件就成功做到了这一点，但由于某些原因，在 Chrome 上无法阻止第一个事件缩放。无论如何，第一个 ctrl+scroll 都会缩放，直到我添加了 keydown 方法。

添加 keydown 事件使我能够防止第一个滚动事件触发缩放，但随后我产生了副作用，即所有与 ctrl 键相关的快捷方式（例如刷新等）将不再起作用。

这就是为什么我还必须添加一个变量来跟踪天气或没有正在进行的滚动事件。

最后我不得不添加一个计时器，以便 var 再次设置为 false。

结果是所有 ctrl + 滚动事件（包括第一个事件）都会阻止缩放。您可以修改它来检查 - 或 = 是否被保留以防止键盘缩放，但这不是我的意图。

感谢 Sumesh Dubey 的回答启发我使用 keydown 事件。