javascript - Extjs 菜单在 Firefox 中不能用鼠标滚轮滚动

Question

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

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

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

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

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

Answer 1

在 firefox 上也修复了向菜单添加可滚动属性的问题:

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

在您的渲染前执行此操作。

没有滚动条就无法在 firefox 上运行。