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

Question

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

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

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

是否有解决方法可以在 Firefox 中实现此功能？我知道 Firefox 使用的是 "DOMMouseScroll" 事件而不是 "mousewheel" 事件，我尝试将此侦听器添加到菜单但它不起作用。

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

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 上运行。

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

Extjs menu is not scrollable with the mouse wheel in Firefox

javascript

extjs

extjs6