Extjs 菜单在 Firefox 中无法使用鼠标滚轮滚动

Extjs menu is not scrollable with the mouse wheel in Firefox

本文关键字：鼠标 滚动 菜单 Firefox Extjs      更新时间：2023-09-26

>我在extjs6中有一个滚动菜单，具有默认设置，项目列表顶部和底部的向上/向下按钮可以滚动它。在Chrome和IE中，我也可以使用鼠标滚轮滚动它。

问题是在Firefox中鼠标滚轮滚动不起作用，我可以使用两个按钮滚动菜单。

我在Sencha Fiddle（https://fiddle.sencha.com/#fiddle/1748）中做了一些测试，我发现如果我使用extjs4，鼠标滚轮在所有浏览器中都可以正常工作，但它在使用extjs6的Firefox中不起作用。

在 Firefox 中也有实现此功能的解决方法吗？我知道Firefox正在使用"DOMMouseScroll"事件而不是"鼠标滚轮"事件，我试图将此侦听器添加到菜单中，但它不起作用。

如果可能的话，我更喜欢使用标准菜单滚动而不是滚动条。

将可滚动属性添加到您的菜单中 火狐浏览器上也修复了问题：

Ext.application({
    name: 'Fiddle',
    launch: function() {
        var scrollMenu = Ext.create('Ext.menu.Menu', {
            height: 100,
            scrollable:{
                x:false,
                y:true
            }
        });
        for (var i = 0; i < 50; ++i) {
            scrollMenu.add({
                text: 'Item ' + (i + 1)
            });
        };
        Ext.create('Ext.panel.Panel', {
            width: 500,
            height: 500,
            items: [{
                xtype: 'toolbar',
                width: '100%',
                height: 40,
                items: [{
                    text: 'Scrolling Menu',
                    menu: scrollMenu
                }]
            }],
            renderTo: Ext.getBody()
        });
    }
});

如果您只想在 Firefox 上解决问题，您可以设置此属性，控制使用的浏览器是否是 Firefox

： 
if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1)
{
     //Do Firefox-related activities
     scrollMenu.setConfig('scrollable',{
         x:false,
         y:true
     });
}

在之前的渲染中执行此操作。

没有滚动条就无法让它在火狐上工作。

相关文章：