禁用元素滚动行为并改为滚动页面的指令答案

【问题标题】：Directive to disable element scrolling behavior and scroll page instead禁用元素滚动行为并改为滚动页面的指令
【发布时间】：2016-04-05 23:38:01
【问题描述】：

我要做的是创建一个指令，当放置在一个元素上时（例如选择下拉菜单）会禁用该元素的鼠标滚轮滚动，而是滚动页面。我设法找到了两种方法来解决这个问题，但都不完整。

当焦点在元素上时不允许滚动页面（它会禁用所有滚动）

over.directive('disableSelectScroll', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attributes) {
            element.on('mousewheel', function (e) {
                return false;
            })
        }
    }
});

这适用于 firefox 和 chrome，但对 IE (11) 不起作用

over.directive('disableSelectScroll', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attributes) {
            ['touchstart', 'touchmove', 'touchend', 'keydown', 'wheel', 'mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'].forEach(function (eventName) {
                element.unbind(eventName);
            });
        }
    }
});

当元素接收到鼠标滚轮事件或以某种方式链接到页面滚动行为时，我是否必须重新定义滚动行为？

【问题讨论】：

标签： javascript jquery angularjs scroll

【解决方案1】：

我找到了解决此问题的部分解决方法。在我的用例中，只有在该元素被聚焦时才会在元素内滚动。从元素中移除焦点，鼠标滚轮事件应该向上传播。以下代码提供了令人满意的结果：

over.directive('disableSelectScroll', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attributes) {
            element.on('mousewheel', function () {
                element.blur();
            });
        }
    }
});

此解决方案的缺点是下拉菜单在滚动时关闭。

【讨论】：